/* ══ TOKENS ══════════════════════════════════════════════════════ */
:root {
  --bg0: #050510;
  --bg1: #0d0d20;
  --bg2: #13132a;
  --bg3: #1a1a38;
  --gold: #FFD700;
  --gold2: #B8860B;
  --gold3: #FFF0A0;
  --purple: #7B2FBE;
  --purple2: #9B4FDE;
  --cyan: #00D4FF;
  --green: #00E676;
  --red: #FF1744;
  --text: #E8E8FF;
  --muted: #8888BB;
  --card-r: 16px;
  --glow-gold: 0 0 20px rgba(255,215,0,.35), 0 0 40px rgba(255,215,0,.15);
  --glow-purple: 0 0 20px rgba(123,47,190,.5);
  --glow-cyan: 0 0 15px rgba(0,212,255,.4);
  --font: 'Segoe UI', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg0); color: var(--text); font-family: var(--font); overflow: hidden; }
button { cursor: pointer; border: none; font-family: var(--font); }
input { font-family: var(--font); }

/* ══ ANIMATED STARFIELD ═══════════════════════════════════════════ */
#stars-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ══ SCREENS ══════════════════════════════════════════════════════ */
.screen { position: fixed; inset: 0; z-index: 10; display: none; flex-direction: column; overflow: hidden; }
.screen.active { display: flex; }

/* ══ LOGIN SCREEN ═════════════════════════════════════════════════ */
#screen-login {
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1a0a3a 0%, #050510 70%);
}
.login-card {
  background: rgba(20,15,45,.92);
  border: 1px solid rgba(255,215,0,.25);
  border-radius: 24px;
  padding: 48px 40px 40px;
  width: min(420px, 92vw);
  backdrop-filter: blur(20px);
  box-shadow: var(--glow-gold), 0 32px 80px rgba(0,0,0,.6);
  position: relative;
  z-index: 1;
}
.login-logo {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo .casino-icon { font-size: 52px; display: block; margin-bottom: 8px; filter: drop-shadow(0 0 12px rgba(255,215,0,.6)); }
.login-logo h1 { font-size: 26px; font-weight: 800; background: linear-gradient(135deg, var(--gold), var(--gold2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; }
.login-logo p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.input-group { margin-bottom: 18px; }
.input-group label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.input-group input {
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.input-group input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,215,0,.15); }
.btn-login {
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color: #000;
  font-size: 15px;
  font-weight: 800;
  border-radius: 12px;
  letter-spacing: .5px;
  margin-top: 8px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(255,215,0,.3);
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,215,0,.45); }
.btn-login:active { transform: translateY(0); }
.login-error { color: var(--red); font-size: 13px; text-align: center; margin-top: 12px; height: 18px; }
.login-demo {
  margin-top: 20px;
  padding: 14px;
  background: rgba(123,47,190,.15);
  border: 1px solid rgba(123,47,190,.3);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.login-demo strong { color: var(--purple2); }

/* ══ LOBBY ════════════════════════════════════════════════════════ */
#screen-lobby {
  flex-direction: column;
  overflow: hidden;
}
.lobby-header {
  background: rgba(13,13,32,.95);
  border-bottom: 1px solid rgba(255,215,0,.15);
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.header-brand { display: flex; align-items: center; gap: 10px; }
.header-brand .icon { font-size: 22px; }
.header-brand h2 { font-size: 16px; font-weight: 800; background: linear-gradient(90deg, var(--gold), var(--gold2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.header-right { display: flex; align-items: center; gap: 10px; }
.coin-badge {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 700; color: var(--gold);
  cursor: pointer; transition: background .2s;
}
.coin-badge:hover { background: rgba(255,215,0,.18); }
.coin-badge .coin-icon { font-size: 16px; }
.btn-logout {
  background: rgba(255,23,68,.15);
  border: 1px solid rgba(255,23,68,.3);
  color: var(--red);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  transition: background .2s;
}
.btn-logout:hover { background: rgba(255,23,68,.25); }
.lobby-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 20px 30px;
  position: relative;
  z-index: 1;
}
.lobby-banner {
  background: linear-gradient(135deg, rgba(123,47,190,.4) 0%, rgba(0,212,255,.2) 100%);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: var(--card-r);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.lobby-banner h3 { font-size: 18px; font-weight: 800; color: var(--gold); }
.lobby-banner p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.btn-shop {
  background: linear-gradient(135deg, var(--purple), var(--purple2));
  color: #fff;
  border-radius: 20px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--glow-purple);
  transition: transform .15s;
  white-space: nowrap;
}
.btn-shop:hover { transform: translateY(-2px); }
.section-title { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* ══ GAME CARDS ══════════════════════════════════════════════════ */
.game-card {
  border-radius: var(--card-r);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid rgba(255,255,255,.08);
}
.game-card:hover { transform: translateY(-6px) scale(1.02); }
.game-card:hover .gc-thumb { filter: brightness(1.1); }
.gc-thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: filter .2s;
}
.gc-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.6)); }
.gc-thumb .emoji { font-size: 52px; position: relative; z-index: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.gc-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
}
.badge-hot { background: var(--red); color: #fff; }
.badge-new { background: var(--green); color: #000; }
.badge-vip { background: var(--gold); color: #000; }
.badge-live { background: var(--purple); color: #fff; animation: pulse-badge 1.5s ease-in-out infinite; }
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:.6} }
.gc-info { background: var(--bg2); padding: 14px; }
.gc-info h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.gc-info .gc-meta { display: flex; justify-content: space-between; align-items: center; }
.gc-tag { font-size: 10px; color: var(--muted); background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 10px; }
.gc-rtp { font-size: 11px; font-weight: 700; color: var(--green); }
.gc-play {
  width: 100%; margin-top: 12px; padding: 10px;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  color: #000; font-size: 12px; font-weight: 800;
  border-radius: 8px; letter-spacing: .5px;
  transition: box-shadow .15s;
}
.gc-play:hover { box-shadow: 0 0 16px rgba(255,215,0,.5); }

/* Thumb gradients per game */
.thumb-wild-buffalo  { background: linear-gradient(135deg, #3d1a00, #8B4513, #D4800A); }
.thumb-golden-dragon { background: linear-gradient(135deg, #6b0000, #c0392b, #FFD700); }
.thumb-lucky-sevens  { background: linear-gradient(135deg, #0a0a3e, #2255cc, #9B59B6); }
.thumb-diamond-rush  { background: linear-gradient(135deg, #003333, #00897B, #7B2FBE); }
.thumb-texas-holdem  { background: linear-gradient(135deg, #001a00, #1a5200, #2ECC71); }
.thumb-blackjack     { background: linear-gradient(135deg, #0d0d0d, #1a1a1a, #B8860B); }
.thumb-roulette      { background: linear-gradient(135deg, #1a0000, #8B0000, #1a1a1a); }
.thumb-baccarat      { background: linear-gradient(135deg, #000d1a, #003366, #FFD700); }
.thumb-ocean-king    { background: linear-gradient(135deg, #001a33, #006994, #00D4FF); }
.thumb-fortune-cookie{ background: linear-gradient(135deg, #2d1a00, #CC6600, #FFD700); }

/* ══ GAME SCREEN ══════════════════════════════════════════════════ */
#screen-game {
  flex-direction: column;
  background: var(--bg0);
}
.game-header {
  background: rgba(13,13,32,.98);
  border-bottom: 1px solid rgba(255,215,0,.12);
  padding: 0 16px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 20;
}
.game-header h3 { font-size: 15px; font-weight: 700; color: var(--gold); }
.game-header-right { display: flex; align-items: center; gap: 10px; }
.btn-back {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  transition: background .2s;
}
.btn-back:hover { background: rgba(255,255,255,.15); }
.game-area { flex: 1; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; padding: 20px 16px 24px; }

/* ══ COIN SHOP MODAL ══════════════════════════════════════════════ */
#modal-shop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.75);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
#modal-shop.open { display: flex; }
.shop-card {
  background: var(--bg2);
  border: 1px solid rgba(255,215,0,.25);
  border-radius: 24px;
  padding: 32px 28px;
  width: min(480px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--glow-gold), 0 32px 80px rgba(0,0,0,.8);
}
.shop-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.shop-header h3 { font-size: 20px; font-weight: 800; color: var(--gold); }
.btn-close {
  background: rgba(255,255,255,.1);
  border: none;
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
}
.btn-close:hover { background: rgba(255,255,255,.2); }
.balance-box {
  background: rgba(255,215,0,.08);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.balance-box .bal-icon { font-size: 28px; }
.balance-box .bal-label { font-size: 12px; color: var(--muted); }
.balance-box .bal-val { font-size: 22px; font-weight: 800; color: var(--gold); }
.shop-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.shop-tab {
  flex: 1; padding: 8px; border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted); font-size: 12px; font-weight: 600;
  transition: all .2s; cursor: pointer;
}
.shop-tab.active { background: rgba(255,215,0,.15); border-color: var(--gold); color: var(--gold); }
.pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.pkg-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.pkg-card:hover, .pkg-card.selected { border-color: var(--gold); background: rgba(255,215,0,.1); }
.pkg-card .pkg-popular {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.pkg-coins { font-size: 20px; font-weight: 800; color: var(--gold); }
.pkg-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.pkg-price { font-size: 22px; font-weight: 800; color: var(--text); }
.pkg-desc { font-size: 10px; color: var(--muted); margin-top: 4px; }
.agent-note {
  background: rgba(123,47,190,.15);
  border: 1px solid rgba(123,47,190,.3);
  border-radius: 10px;
  padding: 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.agent-note strong { color: var(--purple2); }
.code-input-row { display: flex; gap: 8px; margin-bottom: 16px; }
.code-input-row input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 10px;
  color: var(--text); padding: 12px; font-size: 14px; outline: none;
  text-transform: uppercase; letter-spacing: 1px;
}
.code-input-row input:focus { border-color: var(--gold); }
.btn-redeem {
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color: #000; font-weight: 800; font-size: 13px;
  padding: 12px 20px; border-radius: 10px;
  transition: box-shadow .15s;
}
.btn-redeem:hover { box-shadow: 0 0 16px rgba(255,215,0,.5); }
.redeem-msg { text-align: center; font-size: 13px; height: 18px; }
.redeem-ok { color: var(--green); }
.redeem-err { color: var(--red); }

/* ══ GAME ENGINES ═════════════════════════════════════════════════ */
.game-engine { width: 100%; max-width: 600px; }

/* Slots shared */
.slot-machine {
  background: rgba(20,15,45,.95);
  border: 2px solid rgba(255,215,0,.3);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  box-shadow: var(--glow-gold);
}
.slot-title { font-size: 18px; font-weight: 800; color: var(--gold); margin-bottom: 4px; }
.slot-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.reel-wrapper {
  display: flex; gap: 8px; justify-content: center;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  overflow: hidden;
}
.reel-col { display: flex; flex-direction: column; gap: 4px; }
.reel-cell {
  width: 72px; height: 72px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  border: 1px solid rgba(255,255,255,.08);
  transition: background .15s;
}
.reel-cell.win { background: rgba(255,215,0,.2); border-color: var(--gold); animation: win-cell .5s ease-in-out infinite alternate; }
@keyframes win-cell { from{box-shadow:0 0 0 rgba(255,215,0,0)} to{box-shadow:0 0 16px rgba(255,215,0,.6)} }
.slot-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bet-row { display: flex; align-items: center; gap: 8px; }
.bet-label { font-size: 12px; color: var(--muted); }
.bet-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text); width: 32px; height: 32px;
  border-radius: 8px; font-size: 16px; font-weight: 700;
  transition: background .15s;
}
.bet-btn:hover { background: rgba(255,255,255,.18); }
.bet-val { font-size: 18px; font-weight: 800; color: var(--gold); min-width: 60px; text-align: center; }
.btn-spin {
  background: linear-gradient(135deg, #B8860B, #FFD700);
  color: #000; font-size: 16px; font-weight: 900;
  padding: 14px 40px; border-radius: 50px;
  box-shadow: 0 4px 20px rgba(255,215,0,.4);
  transition: transform .15s, box-shadow .15s;
  letter-spacing: 1px;
}
.btn-spin:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 6px 30px rgba(255,215,0,.6); }
.btn-spin:disabled { opacity: .5; cursor: not-allowed; }
.win-display { min-height: 32px; font-size: 20px; font-weight: 900; color: var(--green); text-shadow: 0 0 16px rgba(0,230,118,.6); }

/* Payline indicator */
.paylines { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.payline-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.payline-dot.active { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

/* ══ CARD GAMES ════════════════════════════════════════════════════ */
.card-table {
  background: rgba(0,40,0,.8);
  border: 2px solid rgba(255,215,0,.3);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  box-shadow: var(--glow-gold);
}
.card-table.baccarat { background: rgba(0,10,30,.9); }
.card-table.roulette-table { background: rgba(30,0,0,.9); }
.hand-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.hand { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; min-height: 110px; align-items: center; }
.playing-card {
  width: 64px; height: 90px;
  background: #fff;
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #222;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  line-height: 1;
  position: relative;
  user-select: none;
}
.playing-card.red { color: #CC0000; }
.playing-card.back {
  background: linear-gradient(135deg, #1a0050, #5B0FBE);
  color: transparent;
}
.playing-card.back::after { content: '🂠'; font-size: 30px; color: rgba(255,255,255,.3); }
.card-rank { font-size: 20px; font-weight: 900; }
.card-suit { font-size: 18px; }
.card-corner { position: absolute; top: 4px; left: 6px; font-size: 12px; font-weight: 900; line-height: 1.1; }
.card-corner.br { top: auto; bottom: 4px; left: auto; right: 6px; transform: rotate(180deg); }
.status-msg { font-size: 16px; font-weight: 700; min-height: 26px; margin-bottom: 12px; }
.status-win { color: var(--green); text-shadow: 0 0 12px rgba(0,230,118,.5); }
.status-lose { color: var(--red); }
.status-push { color: var(--gold); }
.btn-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.btn-game {
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  transition: transform .15s, opacity .15s;
}
.btn-game:hover:not(:disabled) { transform: translateY(-2px); }
.btn-game:disabled { opacity: .35; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: #000; }
.btn-secondary { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--text); }
.btn-danger { background: rgba(255,23,68,.2); border: 1px solid rgba(255,23,68,.4); color: var(--red); }

/* ══ POKER ════════════════════════════════════════════════════════ */
.pay-table { width: 100%; margin-bottom: 16px; border-collapse: collapse; font-size: 11px; }
.pay-table th { color: var(--muted); font-weight: 600; text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pay-table td { padding: 4px 6px; color: var(--text); }
.pay-table tr.pay-hit { background: rgba(255,215,0,.1); }
.pay-table td:last-child { color: var(--gold); font-weight: 700; text-align: right; }

/* ══ ROULETTE ═════════════════════════════════════════════════════ */
.roulette-wheel-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.roulette-wheel {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: conic-gradient(
    #2ECC71 0deg 10deg, #c0392b 10deg 20deg, #2ECC71 20deg 30deg, #c0392b 30deg 40deg,
    #2ECC71 40deg 50deg, #c0392b 50deg 60deg, #2ECC71 60deg 70deg, #c0392b 70deg 80deg,
    #2ECC71 80deg 90deg, #c0392b 90deg 100deg, #2ECC71 100deg 110deg, #c0392b 110deg 120deg,
    #1a1a1a 120deg 130deg, #c0392b 130deg 140deg, #1a1a1a 140deg 150deg, #c0392b 150deg 160deg,
    #1a1a1a 160deg 170deg, #c0392b 170deg 180deg, #1a1a1a 180deg 190deg, #c0392b 190deg 200deg,
    #1a1a1a 200deg 210deg, #2ECC71 210deg 220deg, #1a1a1a 220deg 230deg, #2ECC71 230deg 240deg,
    #1a1a1a 240deg 250deg, #2ECC71 250deg 260deg, #1a1a1a 260deg 270deg, #2ECC71 270deg 280deg,
    #1a1a1a 280deg 290deg, #2ECC71 290deg 300deg, #1a1a1a 300deg 310deg, #c0392b 310deg 320deg,
    #1a1a1a 320deg 330deg, #c0392b 330deg 340deg, #1a1a1a 340deg 350deg, #c0392b 350deg 360deg
  );
  border: 4px solid var(--gold2);
  box-shadow: 0 0 24px rgba(255,215,0,.3), inset 0 0 24px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform 3s cubic-bezier(.17,.67,.12,.99);
  position: relative;
}
.roulette-wheel::after { content: '🎯'; font-size: 28px; position: absolute; }
.roulette-result-num { font-size: 40px; font-weight: 900; min-height: 52px; margin-bottom: 8px; }
.bet-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 12px; }
.bet-chip {
  padding: 10px 6px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
}
.bet-chip:hover, .bet-chip.sel { background: rgba(255,215,0,.15); border-color: var(--gold); color: var(--gold); }
.inline-num-bet { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.inline-num-bet input { flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,215,0,.2); border-radius:8px; color:var(--text); padding:8px; font-size:14px; outline:none; width:60px; }
.inline-num-bet input:focus { border-color:var(--gold); }

/* ══ BACCARAT ═════════════════════════════════════════════════════ */
.bac-bets { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.bac-bet-btn {
  flex: 1; max-width: 120px; padding: 12px;
  border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 2px solid transparent;
  transition: all .2s; cursor: pointer;
}
.bac-bet-btn.player { background: rgba(0,100,200,.2); border-color: rgba(0,150,255,.3); color: #6BB3FF; }
.bac-bet-btn.banker { background: rgba(200,0,50,.2); border-color: rgba(255,0,80,.3); color: #FF6B8A; }
.bac-bet-btn.tie-b { background: rgba(0,180,100,.2); border-color: rgba(0,230,118,.3); color: var(--green); }
.bac-bet-btn.sel { box-shadow: 0 0 12px rgba(255,215,0,.4); border-color: var(--gold) !important; }
.bac-scores { display: flex; gap: 20px; justify-content: center; margin-bottom: 8px; }
.bac-score-box { text-align: center; }
.bac-score-box .bs-lbl { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.bac-score-box .bs-val { font-size: 28px; font-weight: 900; color: var(--gold); }

/* ══ OCEAN KING ════════════════════════════════════════════════════ */
.ocean-wrap { position: relative; }
canvas#ocean-canvas { border-radius: 16px; border: 2px solid rgba(0,212,255,.3); cursor: crosshair; display: block; max-width: 100%; }
.ocean-hud { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.ocean-coins { font-size: 16px; font-weight: 800; color: var(--gold); }
.btn-cannon { padding: 10px 20px; background: linear-gradient(135deg,#003366,#006994); color: var(--cyan); border-radius: 10px; font-size: 12px; font-weight: 700; border: 1px solid rgba(0,212,255,.3); }

/* ══ SCRATCH CARD ══════════════════════════════════════════════════ */
.scratch-wrap { text-align: center; }
.scratch-canvas-wrap { position: relative; display: inline-block; margin: 16px 0; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.6); }
canvas#scratch-canvas { display: block; cursor: grab; }
canvas#scratch-canvas:active { cursor: grabbing; }
.scratch-reveal { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 12px; background: linear-gradient(135deg, #2d1a00, #8B5E00); width: 240px; height: 160px; }
.scratch-cell { background: rgba(255,255,255,.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; }

/* ══ SCROLLBAR ════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: rgba(255,215,0,.2); border-radius: 3px; }

/* ══ TOAST ════════════════════════════════════════════════════════ */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: rgba(20,20,50,.95); border: 1px solid rgba(255,215,0,.3);
  color: var(--text); padding: 12px 24px; border-radius: 20px;
  font-size: 14px; font-weight: 600;
  z-index: 999; transition: transform .3s ease;
  backdrop-filter: blur(10px); white-space: nowrap;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ══ SHIMMER LOADING ══════════════════════════════════════════════ */
@keyframes shimmer { from{opacity:.4} to{opacity:1} }
.spinning .reel-cell { animation: shimmer .1s linear infinite; }

@media (max-width:480px) {
  .reel-cell { width: 56px; height: 56px; font-size: 28px; }
  .games-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .gc-thumb { height: 110px; }
  .gc-thumb .emoji { font-size: 40px; }
}