*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* STAKE — navy-slate with green accent (default) */
  --bg-base: #0f212e;
  --bg-sidebar: #1a2c38;
  --bg-topbar: #1a2c38;
  --bg-card: #1a2c38;
  --bg-card-hover: #2f4553;
  --bg-input: #0f212e;
  --bg-game: #0f212e;
  --bg-controls: #1a2c38;
  --accent: #00e701;
  --accent-dim: #00c900;
  --accent-glow: rgba(0, 231, 1, 0.25);
  --accent-bg: rgba(0, 231, 1, 0.08);
  --purple: #a855f7;
  --red: #ed4163;
  --red-glow: rgba(237, 65, 99, 0.25);
  --gold: #f0b90b;
  --blue: #4d9fec;
  --cyan: #06b6d4;
  --pink: #ec4899;
  --text: #b1bad3;
  --text-bright: #ffffff;
  --text-secondary: #8596a8;
  --text-muted: #556677;
  --border: #2f4553;
  --glass: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --sidebar-w: 230px;
  --topbar-h: 60px;
  --transition: 0.15s ease;
}

/* === THEME PRESETS === */
html[data-theme="rainbet"] {
  --bg-base: #17181e;
  --bg-sidebar: #1d1f25;
  --bg-topbar: #1d1f25;
  --bg-card: #25272f;
  --bg-card-hover: #2e3038;
  --bg-input: #17181e;
  --bg-game: #17181e;
  --bg-controls: #1d1f25;
  --accent: #ff4e64;
  --accent-dim: #e03a50;
  --accent-glow: rgba(255, 78, 100, 0.28);
  --accent-bg: rgba(255, 78, 100, 0.08);
  --border: #34363f;
  --text: #c5c7d1;
  --text-bright: #ffffff;
  --text-secondary: #90929b;
  --text-muted: #5a5c66;
}
html[data-theme="roobet"] {
  --bg-base: #17141f;
  --bg-sidebar: #1e1a2a;
  --bg-topbar: #1e1a2a;
  --bg-card: #26213a;
  --bg-card-hover: #332c4c;
  --bg-input: #17141f;
  --bg-game: #17141f;
  --bg-controls: #1e1a2a;
  --accent: #fb923c;
  --accent-dim: #ea7c26;
  --accent-glow: rgba(251, 146, 60, 0.28);
  --accent-bg: rgba(251, 146, 60, 0.08);
  --border: #33294a;
  --text: #beb6d1;
  --text-bright: #ffffff;
}
html[data-theme="noir"] {
  --bg-base: #000000;
  --bg-sidebar: #0a0a0a;
  --bg-topbar: #0a0a0a;
  --bg-card: #121212;
  --bg-card-hover: #1e1e1e;
  --bg-input: #000000;
  --bg-game: #050505;
  --bg-controls: #0a0a0a;
  --accent: #e8e8e8;
  --accent-dim: #c0c0c0;
  --accent-glow: rgba(232, 232, 232, 0.22);
  --accent-bg: rgba(232, 232, 232, 0.06);
  --border: #1a1a1a;
  --text: #a0a0a0;
  --text-bright: #ffffff;
  --text-secondary: #707070;
  --text-muted: #4a4a4a;
}
html[data-theme="midnight"] {
  --bg-base: #0a0e1a;
  --bg-sidebar: #111627;
  --bg-topbar: #111627;
  --bg-card: #181e32;
  --bg-card-hover: #222a42;
  --bg-input: #0a0e1a;
  --bg-game: #0a0e1a;
  --bg-controls: #111627;
  --accent: #6366f1;
  --accent-dim: #4f52d4;
  --accent-glow: rgba(99, 102, 241, 0.3);
  --accent-bg: rgba(99, 102, 241, 0.08);
  --border: #242b45;
  --text: #a8afc4;
}
html[data-theme="crimson"] {
  --bg-base: #12080a;
  --bg-sidebar: #1c0d10;
  --bg-topbar: #1c0d10;
  --bg-card: #2a1519;
  --bg-card-hover: #381d22;
  --bg-input: #12080a;
  --bg-game: #12080a;
  --bg-controls: #1c0d10;
  --accent: #ef4444;
  --accent-dim: #c53030;
  --accent-glow: rgba(239, 68, 68, 0.3);
  --accent-bg: rgba(239, 68, 68, 0.08);
  --border: #3a1d24;
  --text: #c4a8af;
}
html[data-theme="emerald"] {
  --bg-base: #062e22;
  --bg-sidebar: #083929;
  --bg-topbar: #083929;
  --bg-card: #0c4535;
  --bg-card-hover: #125442;
  --bg-input: #062e22;
  --bg-game: #062e22;
  --bg-controls: #083929;
  --accent: #34d399;
  --accent-dim: #10b981;
  --accent-glow: rgba(52, 211, 153, 0.3);
  --accent-bg: rgba(52, 211, 153, 0.08);
  --border: #145c48;
  --text: #a7d8c6;
}
html[data-theme="sunset"] {
  --bg-base: #1a0a18;
  --bg-sidebar: #2a1124;
  --bg-topbar: #2a1124;
  --bg-card: #3a1930;
  --bg-card-hover: #4a213e;
  --bg-input: #1a0a18;
  --bg-game: #1a0a18;
  --bg-controls: #2a1124;
  --accent: #f97316;
  --accent-dim: #ea580c;
  --accent-glow: rgba(249, 115, 22, 0.3);
  --accent-bg: rgba(249, 115, 22, 0.08);
  --border: #4f2640;
  --text: #e6bdb2;
}
html[data-theme="arctic"] {
  --bg-base: #0a1420;
  --bg-sidebar: #0f1d2f;
  --bg-topbar: #0f1d2f;
  --bg-card: #172841;
  --bg-card-hover: #213457;
  --bg-input: #0a1420;
  --bg-game: #0a1420;
  --bg-controls: #0f1d2f;
  --accent: #38bdf8;
  --accent-dim: #0ea5e9;
  --accent-glow: rgba(56, 189, 248, 0.3);
  --accent-bg: rgba(56, 189, 248, 0.08);
  --border: #223e63;
  --text: #a8c5e0;
}
html[data-theme="royal"] {
  --bg-base: #12082a;
  --bg-sidebar: #1a0f3a;
  --bg-topbar: #1a0f3a;
  --bg-card: #241552;
  --bg-card-hover: #301e68;
  --bg-input: #12082a;
  --bg-game: #12082a;
  --bg-controls: #1a0f3a;
  --accent: #a855f7;
  --accent-dim: #9333ea;
  --accent-glow: rgba(168, 85, 247, 0.3);
  --accent-bg: rgba(168, 85, 247, 0.08);
  --border: #382670;
  --text: #c4a8e0;
}
html[data-theme="mono"] {
  --bg-base: #18181b;
  --bg-sidebar: #202024;
  --bg-topbar: #202024;
  --bg-card: #27272a;
  --bg-card-hover: #323237;
  --bg-input: #18181b;
  --bg-game: #18181b;
  --bg-controls: #202024;
  --accent: #fafafa;
  --accent-dim: #d4d4d4;
  --accent-glow: rgba(250, 250, 250, 0.25);
  --accent-bg: rgba(250, 250, 250, 0.08);
  --border: #3f3f46;
  --text: #a1a1aa;
}
html[data-theme="blood"] {
  --bg-base: #100305;
  --bg-sidebar: #1c0609;
  --bg-topbar: #1c0609;
  --bg-card: #2a0b10;
  --bg-card-hover: #3a0f15;
  --bg-input: #100305;
  --bg-game: #100305;
  --bg-controls: #1c0609;
  --accent: #dc2626;
  --accent-dim: #991b1b;
  --accent-glow: rgba(220, 38, 38, 0.4);
  --accent-bg: rgba(220, 38, 38, 0.1);
  --border: #3d1218;
  --text: #d4a5a9;
}

html, body { height: 100%; }
body {
  font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ==================== TOPBAR ==================== */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.topbar.scrolled {
  background: rgba(10, 10, 18, 0.82);
  backdrop-filter: blur(24px) saturate(1.4);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.logo-link { text-decoration: none; }
.logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-bright);
  user-select: none;
  transition: text-shadow 0.2s;
}
.logo:hover { text-shadow: 0 0 20px var(--accent-glow); }
.logo span { color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 10px; overflow: hidden; flex-shrink: 1; min-width: 0; }

.wallet-pill {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border-radius: 100px;
  overflow: hidden;
  height: 38px;
}
.wallet-bal {
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wallet-bal .currency { color: var(--gold); font-size: 11px; font-weight: 600; }
.wallet-deposit {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0 16px;
  height: 100%;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}
.wallet-deposit:hover { background: var(--accent-dim); }

.user-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition);
}
.user-pill:hover { background: var(--bg-card-hover); }

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: #000; position: relative; overflow: hidden; }
.btn-primary:hover { box-shadow: 0 0 24px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.3); }
.btn-primary:active::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%); }
.btn-primary:disabled { background: #111a14; color: #2a3a2e; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { box-shadow: 0 0 24px var(--red-glow); }
.btn-secondary { background: var(--bg-card-hover); color: var(--text); }
.btn-secondary:hover { background: var(--border); color: var(--text-bright); }
.btn-discord { background: #5865f2; color: #fff; border-radius: 100px; padding: 10px 24px; }
.btn-discord:hover { background: #4752c4; }
.btn-discord svg { flex-shrink: 0; }
.btn-sm { padding: 5px 10px; font-size: 11px; border-radius: var(--radius-xs); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-bright); }

/* ==================== LAYOUT ==================== */
.main-layout { display: flex; flex: 1; overflow: hidden; }

/* ==================== CHAT ==================== */
.chat-panel {
  width: 320px;
  background: var(--bg-sidebar);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 24px rgba(0,0,0,0.4);
}
.chat-panel.open { transform: translateX(0); }
.chat-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.chat-close:hover { color: var(--text-bright); }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
}
.chat-msg {
  background: var(--bg-card);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  word-wrap: break-word;
  animation: bounceIn 0.2s ease-out;
}
.chat-msg-user { color: var(--accent); font-weight: 700; font-size: 11px; margin-bottom: 2px; }
.chat-msg-text { color: var(--text); }
.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.chat-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.chat-input:focus { outline: none; border-color: var(--accent); }
.chat-send {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  width: 36px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.chat-send:hover { filter: brightness(1.1); }
.discord-fab {
  position: fixed;
  bottom: 140px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.discord-fab:hover { transform: scale(1.08); filter: brightness(1.12); }
@media (max-width: 900px) {
  .discord-fab { bottom: 128px; }
}
.chat-fab {
  position: fixed;
  bottom: 78px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .chat-panel { bottom: 52px; width: 100%; max-width: 340px; }
  .chat-fab { bottom: 66px; }
}

/* ==================== SIDEBAR ==================== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  overflow-y: auto;
  flex-shrink: 0;
}
.sidebar-install, .sidebar-discord {
  position: sticky;
  margin: 8px 0 0;
  padding: 10px 12px;
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: filter 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.sidebar-install {
  bottom: 54px;
  background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 -6px 12px rgba(0,0,0,0.35);
}
.sidebar-install:hover { filter: brightness(1.2); transform: translateY(-1px); }
.sidebar-install svg { flex-shrink: 0; }
.sidebar-discord {
  bottom: 0;
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  border: 1px solid rgba(88, 101, 242, 0.5);
  box-shadow: 0 -6px 12px rgba(0,0,0,0.35);
}
.sidebar-discord:hover { filter: brightness(1.12); transform: translateY(-1px); }
.sidebar-discord svg { flex-shrink: 0; }

/* FAB close-button wrapper.
   `display: contents` makes the wrap itself invisible to layout — children
   behave exactly as before — but we can set display:none on the wrap to
   hide the entire FAB + its close button for the current session. On page
   reload the DOM rebuilds and the FAB returns. */
.fab-wrap { display: contents; }
.fab-close {
  position: fixed;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(15, 15, 20, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  z-index: 201;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.fab-close:hover {
  transform: scale(1.15);
  background: rgba(239, 68, 68, 0.92);
  border-color: rgba(255, 255, 255, 0.5);
}
/* Pin each X to the top-right edge of its paired FAB (52px tall, right:16px).
   Bottom = FAB bottom + FAB height - 12 (12px overlap at top edge). */
#fab-install-wrap .fab-close { bottom: 242px; }
#fab-discord-wrap .fab-close { bottom: 180px; }
#fab-chat-wrap    .fab-close { bottom: 118px; }
@media (max-width: 900px) {
  #fab-install-wrap .fab-close { bottom: 230px; }
  #fab-discord-wrap .fab-close { bottom: 168px; }
  #fab-chat-wrap    .fab-close { bottom: 106px; }
}

/* Install FAB on mobile, sits above Discord FAB */
.install-fab {
  position: fixed;
  bottom: 202px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.install-fab:hover { transform: scale(1.08); filter: brightness(1.2); }
@media (max-width: 900px) {
  .install-fab { bottom: 190px; }
}
@media (display-mode: standalone) {
  /* Already installed — hide both install entry points */
  .install-fab, .sidebar-install { display: none !important; }
}
.sidebar-section { margin-bottom: 16px; }

/* ==================== SIDEBAR VIP CTA ==================== */
.sidebar-vip-cta {
  position: sticky;
  bottom: 108px;
  margin: 6px 0 0;
  background: linear-gradient(135deg, #a855f7 0%, #6d28d9 100%);
  border: 1px solid rgba(168, 85, 247, 0.6);
  border-radius: 10px;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.4), 0 0 12px rgba(168, 85, 247, 0.25);
  overflow: hidden;
}
.sidebar-vip-cta-main {
  width: 100%;
  padding: 10px 28px 10px 12px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.sidebar-vip-cta-main:hover { filter: brightness(1.1); }
.sidebar-vip-cta-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
  z-index: 2;
  font-family: inherit;
}
.sidebar-vip-cta-close:hover { opacity: 1; background: rgba(239, 68, 68, 0.95); transform: scale(1.08); }
.sidebar-vip-cta-icon { font-size: 18px; flex-shrink: 0; }
.sidebar-vip-cta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sidebar-vip-cta-text b {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1px;
  line-height: 1.2;
}
.sidebar-vip-cta-text small {
  font-size: 10px;
  opacity: 0.78;
  font-weight: 600;
}

/* ==================== SIDEBAR CATEGORIES ==================== */
.sidebar-cat { margin: 4px 0 2px; }
.sidebar-cat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.sidebar-cat-header:hover { background: var(--bg-card); color: var(--text-bright); }
.sidebar-cat-title { flex: 1; text-align: left; }
.sidebar-cat-count {
  padding: 1px 7px;
  background: var(--bg-input);
  border-radius: 100px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.sidebar-cat-chev {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
.sidebar-cat-open .sidebar-cat-chev { transform: rotate(0deg); color: var(--accent); }
.sidebar-cat-items {
  display: none;
  padding: 2px 0 4px 8px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
}
.sidebar-cat-open .sidebar-cat-items { display: block; }
.sidebar-cat-items .sidebar-link { padding-left: 10px; font-size: 13px; }
.sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  padding: 8px 12px 4px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
}
.sidebar-link:hover { background: var(--glass); color: var(--text-bright); }
.sidebar-link { position: relative; }
.sidebar-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.sidebar-link.active { background: var(--accent-bg); color: var(--accent); }
.sidebar-link.active::before { transform: translateY(-50%) scaleY(1); }
.sidebar-link.active .sidebar-icon { filter: none; }
.sidebar-icon { width: 22px; text-align: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sidebar-icon svg { width: 18px; height: 18px; color: inherit; }
/* border-left replaced by ::before accent bar above */

/* ==================== CONTENT ==================== */
.content { flex: 1; overflow-y: auto; padding: 20px; scroll-behavior: smooth; }
/* Page-level content wrapper keeps everything centered up to 1400px */
.content > .home-hero-discord,
.content > .game-grid,
.content > .section-header,
.content > .section-title,
.content > .info-card,
.content > h2,
.content > .stats-grid,
.content > .profile-hero,
.content > .choice-group { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* ==================== HOME PAGE — Discord-style hero ==================== */
.home-hero-discord {
  position: relative;
  overflow: hidden;
  padding: 44px 40px;
  margin-bottom: 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 40%, #3c45a5 100%);
  border: 1px solid rgba(88, 101, 242, 0.45);
  box-shadow: 0 10px 40px rgba(88, 101, 242, 0.22);
}
.home-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(0,231,1,0.18), transparent 55%);
  pointer-events: none;
}
.home-hero-inner {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.home-hero-icon {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.home-hero-copy { flex: 1; min-width: 260px; }
.home-hero-eyebrow {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 800;
  margin-bottom: 4px;
}
.home-hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 231, 1, 0.14);
  border: 1px solid rgba(0, 231, 1, 0.35);
  color: #d4fdd0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.home-hero-trust b { color: #fff; font-weight: 900; }
.home-hero-trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e701;
  box-shadow: 0 0 0 0 rgba(0, 231, 1, 0.7);
  animation: trustPulse 1.8s ease-out infinite;
}
@keyframes trustPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 231, 1, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 231, 1, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 231, 1, 0); }
}
.home-hero-title {
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}
.home-hero-sub {
  color: rgba(255,255,255,0.86);
  font-size: 15px;
  line-height: 1.5;
  max-width: 640px;
  margin: 0;
}
.home-hero-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.home-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  transition: transform 0.15s ease, background 0.15s ease, filter 0.15s ease;
}
.home-hero-btn:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
.home-hero-btn-primary {
  background: #fff;
  color: #4752c4;
  font-weight: 900;
  border-color: transparent;
}
.home-hero-btn-primary:hover { background: #fff; filter: brightness(1.04); }

/* Compact hero: slimmer padding, inline layout, smaller type. Used after
   daily-quests is surfaced so the advert doesn't dominate the fold. */
.home-hero-compact { padding: 20px 24px; margin-bottom: 14px; border-radius: 14px; }
.home-hero-compact .home-hero-inner { gap: 18px; align-items: center; flex-wrap: wrap; }
.home-hero-compact .home-hero-icon { width: 56px; height: 56px; border-radius: 14px; }
.home-hero-compact .home-hero-icon svg { width: 34px; height: 26px; }
.home-hero-compact .home-hero-copy { min-width: 220px; }
.home-hero-compact .home-hero-title { font-size: 22px; margin: 0 0 4px; }
.home-hero-compact .home-hero-sub { font-size: 13px; max-width: none; }
.home-hero-compact .home-hero-btns { margin-top: 0; flex-shrink: 0; }
.home-hero-compact .home-hero-btn { padding: 8px 16px; font-size: 12.5px; }
@media (max-width: 700px) {
  .home-hero-compact { padding: 18px 16px; }
  .home-hero-compact .home-hero-title { font-size: 19px; }
  .home-hero-compact .home-hero-btns { width: 100%; }
}

@media (max-width: 700px) {
  .home-hero-discord { padding: 28px 22px; border-radius: 16px; }
  .home-hero-inner { gap: 18px; }
  .home-hero-icon { width: 62px; height: 62px; border-radius: 16px; }
  .home-hero-icon svg { width: 36px; height: 28px; }
  .home-hero-title { font-size: 26px; }
  .home-hero-sub { font-size: 13.5px; }
  .home-hero-btn { padding: 10px 16px; font-size: 13px; }
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-title { font-size: 16px; font-weight: 700; color: var(--text-bright); }
.section-link { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.section-link:hover { color: var(--accent); }

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.game-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-decoration: none;
  animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center;
  will-change: transform;
  display: block;
  position: relative;
  border: 1px solid var(--border);
}
.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transition: left 0.5s ease;
  z-index: 2;
  pointer-events: none;
}
.game-card:hover::before { left: 150%; }
.game-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg), 0 0 30px var(--accent-bg);
  border-color: var(--accent-glow);
}
.game-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: #0a0a12;
}
.game-card-img svg { width: 100%; height: 100%; display: block; }
.game-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  z-index: 2;
}
.game-card-lastwin {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 231, 1, 0.15);
  border: 1px solid rgba(0, 231, 1, 0.55);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  z-index: 2;
  text-shadow: 0 0 8px rgba(0, 231, 1, 0.5);
  animation: lastWinPulse 2s ease-in-out infinite;
  letter-spacing: 0.3px;
}
@keyframes lastWinPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 231, 1, 0.3); }
  50%      { box-shadow: 0 0 12px 2px rgba(0, 231, 1, 0.4); }
}

/* ==================== LIVE BETS BAR ==================== */
.live-bets-bar {
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.live-bets-label {
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: livePulse 2s infinite; }
.live-bets-scroll {
  display: flex;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.live-bets-track {
  display: flex;
  gap: 24px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 24px;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
.live-bet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.live-bet-item .game { color: var(--text); font-weight: 600; }
.live-bet-item .win { color: var(--accent); font-weight: 600; }
.live-bet-item .loss { color: var(--red); font-weight: 600; }

/* ==================== GAME HEADER (back button) ==================== */
.game-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 14px;
}
.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
}
.back-btn:hover { background: var(--bg-card-hover); color: var(--text-bright); }
.back-btn svg { width: 16px; height: 16px; }
.game-header-icon { display: flex; color: var(--accent); }
.game-header-icon svg { width: 20px; height: 20px; }
.game-header-title { font-size: 16px; font-weight: 700; color: var(--text-bright); }

/* ==================== PAGE TRANSITIONS ==================== */
.page-exit { animation: pageOut 0.12s ease forwards; }
.page-enter { animation: pageIn 0.2s ease forwards; }
@keyframes pageOut { to { opacity: 0; transform: translateY(6px); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ==================== GAME PAGE LAYOUT ==================== */
.game-page {
  display: flex;
  gap: 0;
  max-width: 1200px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  min-height: 520px;
}
.game-controls {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-controls);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.game-area {
  flex: 1;
  background: var(--bg-game);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}

/* ==================== FORM CONTROLS (Stake-style) ==================== */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text-bright);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color var(--transition);
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.form-input::placeholder { color: var(--text-muted); font-weight: 400; }
select.form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b8a9e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.input-row {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.input-row .form-input { flex: 1; min-width: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-row .btn-mult {
  padding: 0 10px;
  background: var(--border);
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  border-right: 1px solid var(--bg-input);
}
.input-row .btn-mult:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-right: none; }
.input-row .btn-mult:hover { background: var(--bg-card-hover); color: var(--text-bright); }

.btn-play {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  margin-top: auto;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.choice-group { display: flex; gap: 4px; }
.choice-btn {
  flex: 1;
  padding: 9px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}
.choice-btn:hover { border-color: var(--text-muted); color: var(--text-bright); }
.choice-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* ==================== GAME RESULT DOCK (replaces overlay) ====================
   One dock is placed below every game area via gamePageWrap(). Games call
   GameUI.resultOverlay(...) or GameUI.showResult(...) which fills the dock
   with a two-column card (Multiplier | Payout). Only ONE dock exists per
   page, so rapid re-plays replace in place instead of stacking overlays. */
.game-result-dock {
  margin: 14px 20px 20px;
  min-height: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.result-dock-inner {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-width: 320px;
  max-width: 560px;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  font-family: inherit;
  pointer-events: auto;
}
.result-dock-inner.result-dock-win {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-bg), transparent 55%), var(--bg-card);
  box-shadow: 0 10px 30px var(--accent-glow), 0 0 0 1px var(--accent);
}
.result-dock-inner.result-dock-lose {
  border-color: var(--red);
  background: linear-gradient(135deg, rgba(237, 65, 99, 0.13), transparent 55%), var(--bg-card);
  box-shadow: 0 10px 30px rgba(237, 65, 99, 0.28), 0 0 0 1px var(--red);
}
.result-dock-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 24px;
  min-width: 128px;
}
.result-dock-divider {
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
  flex-shrink: 0;
}
.rb-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.result-dock-inner .rb-mult {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
  animation: none;
}
.result-dock-inner .rb-amt {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.1;
  animation: none;
}
.result-dock-win .rb-mult { color: var(--accent); text-shadow: 0 0 18px var(--accent-glow); }
.result-dock-win .rb-amt  { color: var(--accent); }
.result-dock-lose .rb-mult { color: var(--red); text-shadow: 0 0 18px var(--red-glow); }
.result-dock-lose .rb-amt  { color: var(--red); }
.rb-extra {
  align-self: center;
  margin-left: 18px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-dock-animate { animation: resultDockPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes resultDockPop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.result-dock-replay {
  align-self: center;
  margin-left: 18px;
  padding: 8px 14px;
  background: var(--accent);
  color: #0a0a10;
  border: none;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 14px rgba(0, 231, 1, 0.3);
  white-space: nowrap;
}
.result-dock-replay:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 5px 18px rgba(0, 231, 1, 0.45); }
.result-dock-replay:active { transform: translateY(0) scale(0.97); }
.result-dock-replay svg { flex-shrink: 0; }
@media (max-width: 540px) {
  .game-result-dock { margin: 12px 12px 16px; }
  .result-dock-inner { min-width: 280px; padding: 12px 16px; }
  .result-dock-col { padding: 2px 14px; min-width: 110px; }
  .result-dock-inner .rb-mult { font-size: 26px; }
  .result-dock-inner .rb-amt  { font-size: 20px; }
  .rb-extra { margin-left: 10px; max-width: 120px; }
  .result-dock-replay { margin-left: 10px; padding: 7px 12px; font-size: 11px; }
  .result-dock-replay span { display: none; }
}

/* ==================== RESULT BANNER (below game, not overlay) ==================== */
.result-banner {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  height: 90px;
  display: flex;
  align-items: flex-start;
  transform-origin: center top;
  justify-content: center;
  gap: 20px;
  padding: 12px 24px 0;
  z-index: 10;
  animation: slideBannerUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.result-banner.win { background: radial-gradient(ellipse 75% 110% at 50% 95%, var(--accent-glow) 0%, var(--accent-bg) 50%, transparent 85%); }
.result-banner.lose { background: radial-gradient(ellipse 75% 110% at 50% 95%, var(--red-glow) 0%, rgba(237,65,99,0.08) 50%, transparent 85%); }
.rb-mult { font-size: 36px; font-weight: 700; letter-spacing: -1px; animation: bounceIn 0.4s; }
.result-banner.win .rb-mult { color: var(--accent); text-shadow: 0 0 40px var(--accent-glow), 0 0 80px var(--accent-bg); }
.result-banner.lose .rb-mult { color: var(--red); text-shadow: 0 0 40px var(--red-glow); }
.rb-amt { font-size: 22px; font-weight: 700; animation: bounceIn 0.4s 0.1s both; }
.result-banner.win .rb-amt { color: var(--accent); }
.result-banner.lose .rb-amt { color: var(--red); }
@keyframes slideBannerUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Live-updating "● LIVE" pill used on Leaderboard + Tournament */
.live-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--accent-bg);
  color: var(--accent);
  vertical-align: middle;
  animation: liveDotPulse 2s ease-in-out infinite;
}
.live-pill.pulse { animation: liveFlash 0.6s ease-out 1, liveDotPulse 2s ease-in-out infinite 0.6s; }
@keyframes liveDotPulse { 0%, 100% { opacity: 0.7 } 50% { opacity: 1 } }
@keyframes liveFlash { 0% { background: var(--accent); color: #fff; transform: scale(1.08) } 100% { background: var(--accent-bg); color: var(--accent); transform: scale(1) } }

/* ==================== MINES ==================== */
.mines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 320px;
  perspective: 900px;
}
.mine-tile {
  aspect-ratio: 1;
  background: var(--bg-card-hover);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1), background 0.2s, border-color 0.2s;
  position: relative;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.mine-tile:hover:not(.revealed):not(.disabled) {
  background: var(--bg-card);
  border-color: var(--text-muted);
  transform: scale(1.05);
}
.mine-tile.safe {
  background: var(--accent-bg);
  border-color: var(--accent);
  animation: tileFlip 0.55s cubic-bezier(0.4, 0.2, 0.2, 1) both;
  box-shadow: 0 0 24px var(--accent-glow), inset 0 0 16px var(--accent-bg);
}
.mine-tile.bomb {
  background: rgba(237,66,69,0.18);
  border-color: var(--red);
  animation: tileFlipShake 0.6s cubic-bezier(0.4, 0.2, 0.2, 1) both;
  box-shadow: 0 0 28px rgba(237,66,69,0.5), inset 0 0 18px rgba(237,66,69,0.25);
}
@keyframes tileFlip {
  0%   { transform: rotateY(0) scale(1); }
  50%  { transform: rotateY(180deg) scale(0.85); filter: brightness(0.6); }
  100% { transform: rotateY(360deg) scale(1); filter: brightness(1); }
}
@keyframes tileFlipShake {
  0%   { transform: rotateY(0) scale(1); }
  45%  { transform: rotateY(180deg) scale(0.85); filter: brightness(0.5); }
  60%  { transform: rotateY(360deg) translateX(-4px); filter: brightness(1); }
  70%  { transform: translateX(4px); }
  80%  { transform: translateX(-3px); }
  90%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
/* Cascade reveal: slight delay per tile so mines pop in sequence after loss */
.mine-tile.reveal-cascade { animation: tileFlipCascade 0.45s cubic-bezier(0.4, 0.2, 0.2, 1) both; }
@keyframes tileFlipCascade {
  0%   { transform: rotateY(0)    scale(1);   opacity: 0.55; }
  50%  { transform: rotateY(180deg) scale(0.9); opacity: 0.8; filter: brightness(0.6); }
  100% { transform: rotateY(360deg) scale(1);   opacity: 1;   filter: brightness(1); }
}
/* Cashout pulse wave across all safe tiles */
.mine-tile.cashout-pulse { animation: tileCashoutPulse 0.55s ease-out both; }
@keyframes tileCashoutPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 231, 1, 0.75), inset 0 0 16px var(--accent-bg); transform: scale(1); }
  40%  { box-shadow: 0 0 0 12px rgba(0, 231, 1, 0.15), inset 0 0 24px var(--accent-bg); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 18px rgba(0, 231, 1, 0), inset 0 0 16px var(--accent-bg); transform: scale(1); }
}
.mine-tile.disabled { cursor: default; opacity: 0.4; }

/* ==================== BLACKJACK · VELVET ROOM ==================== */
/* Rebuilt: burgundy felt + art-deco gold frame + candle glow vignette */
.bj-table {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 28px 24px;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255, 215, 0, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(192, 40, 60, 0.28) 0%, transparent 60%),
    linear-gradient(135deg, #4a0c18 0%, #2a0710 45%, #16040a 100%);
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0.55), inset 0 0 60px rgba(0,0,0,0.65), 0 20px 60px rgba(74, 12, 24, 0.45);
  overflow: hidden;
}
/* Faint diagonal velvet weave texture overlay */
.bj-table::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(255, 255, 255, 0.015) 3px 4px),
    repeating-linear-gradient(-45deg, transparent 0 3px, rgba(0, 0, 0, 0.05) 3px 4px);
  pointer-events: none;
  border-radius: 14px;
}
/* Gold art-deco corner ornaments */
.bj-table::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 10px;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.08);
}

/* Idle/pre-deal decoration so the table doesn't look hollow before the first deal */
.bj-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0.75;
  animation: bjIdleBreathe 3.5s ease-in-out infinite alternate;
}
@keyframes bjIdleBreathe {
  from { opacity: 0.62; transform: scale(1); }
  to   { opacity: 0.85; transform: scale(1.01); }
}
.bj-idle-cards { display: flex; align-items: center; justify-content: center; height: 90px; }
.bj-idle-card {
  width: 52px;
  height: 72px;
  background: linear-gradient(145deg, #fffbeb 0%, #e8dcc0 100%);
  border: 1.5px solid #d4af37;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Georgia', serif;
  font-weight: 900;
  color: #0a0a0a;
  margin: 0 -14px;
  position: relative;
}
.bj-idle-card span:first-child { font-size: 20px; line-height: 1; }
.bj-idle-card span:last-child  { font-size: 16px; line-height: 1; margin-top: 2px; }
.bj-idle-card-red { color: #c0271c; }
.bj-idle-text { font-size: 14px; color: #f4dfad; font-weight: 700; letter-spacing: 0.5px; }
.bj-idle-text b { color: #d4af37; }
.bj-idle-sub  { font-size: 11px; color: rgba(244, 223, 173, 0.55); font-style: italic; letter-spacing: 1px; text-transform: uppercase; }
.bj-table .hand-label { color: #d4af37; letter-spacing: 2px; font-weight: 800; }
.bj-table .hand-value { color: #fffbeb; text-shadow: 0 0 14px rgba(212,175,55,0.5); font-size: 22px; }
.card-hand { display: flex; gap: 10px; justify-content: center; }
.playing-card {
  width: 72px;
  height: 100px;
  background: linear-gradient(145deg, #fffbeb 0%, #e8dcc0 100%);
  border-radius: 8px;
  border: 1.5px solid #d4af37;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 16px;
  font-weight: 700;
  color: #0a0a0a;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  animation: dealCard 0.3s ease;
}
.playing-card.red { color: #c0271c; }
@keyframes bjCardDeal {
  0%   { opacity: 0; transform: translate(-240px, -140px) rotate(-18deg) scale(0.85); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
}
.playing-card[data-deal="1"] {
  animation: bjCardDeal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--deal-i, 0) * 0.12s);
}
@keyframes bjCardFlip {
  0%   { transform: rotateY(180deg) scale(0.92); filter: brightness(0.7); }
  50%  { transform: rotateY(90deg)  scale(0.98); filter: brightness(0.85); }
  100% { transform: rotateY(0deg)   scale(1);    filter: brightness(1); }
}
.playing-card[data-reveal="1"] {
  animation: bjCardFlip 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.playing-card.hidden {
  background: linear-gradient(135deg, #2f4553, #1a2c38);
  color: #2f4553;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.03) 4px, rgba(255,255,255,0.03) 8px);
}
.hand-label { font-size: 11px; color: var(--text-secondary); text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.hand-value { font-size: 20px; font-weight: 800; text-align: center; color: var(--text-bright); }

/* ==================== PLINKO · AZTEC DROP ==================== */
.plinko-canvas { width: 100%; height: 100%; position: relative; z-index: 1; }
/* Give the plinko game-area a sandstone + torch-glow ambience. Scoped
   via :has() so it only applies on the plinko page and doesn't disturb
   other games that share .game-area. */
.game-area:has(.plinko-canvas) {
  background:
    radial-gradient(ellipse at 50% 10%, rgba(249, 115, 22, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #2a1c10 0%, #180c07 100%);
  border: 1px solid rgba(212, 175, 55, 0.18);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  position: relative;
}
/* Faint carved-stone glyph pattern on the wall */
.game-area:has(.limbo-result) {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(167, 139, 250, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, #1e1b4b 0%, #0a0620 55%, #020010 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.3);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}
.game-area:has(.limbo-result)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 28% 45%, #c4b5fd, transparent),
    radial-gradient(2px 2px at 48% 18%, #fff, transparent),
    radial-gradient(1px 1px at 65% 38%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 82% 25%, #fef3c7, transparent),
    radial-gradient(1px 1px at 18% 75%, #c4b5fd, transparent),
    radial-gradient(1.5px 1.5px at 52% 82%, #fff, transparent),
    radial-gradient(1px 1px at 78% 68%, #fff, transparent),
    radial-gradient(2px 2px at 92% 88%, #fef3c7, transparent);
  opacity: 0.7;
  pointer-events: none;
  animation: limboStarfield 8s ease-in-out infinite alternate;
}
@keyframes limboStarfield { from { opacity: 0.5; } to { opacity: 0.9; } }
.game-area:has(.limbo-result) .limbo-result {
  color: #e9d5ff !important;
  text-shadow: 0 0 30px rgba(167, 139, 250, 0.55);
}

.game-area:has(.slots-display) {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(236, 72, 153, 0.25) 0%, transparent 55%),
    linear-gradient(180deg, #1e1b4b 0%, #0a0620 60%, #02010a 100%) !important;
  border: 1px solid rgba(34, 211, 238, 0.3);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}
/* Synthwave perspective grid */
.game-area:has(.slots-display)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(236, 72, 153, 0.35) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(236, 72, 153, 0.2) 20px 21px);
  transform: perspective(400px) rotateX(58deg) translateY(10%);
  transform-origin: 50% 100%;
  pointer-events: none;
  opacity: 0.5;
}
/* CRT scanline overlay on top layer */
.game-area:has(.slots-display)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, 0.015) 2px 3px);
  pointer-events: none;
}
.game-area:has(.slots-display) .slot-reel {
  background: linear-gradient(145deg, #1e1b4b 0%, #0a0620 100%) !important;
  border-color: #22d3ee !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.25), inset 0 0 12px rgba(236, 72, 153, 0.12);
}

.game-area:has(.coin-wrap) {
  background:
    radial-gradient(ellipse at 18% 15%, rgba(254, 243, 199, 0.2) 0%, transparent 30%),
    linear-gradient(180deg, #0c2a4a 0%, #031022 55%, #010612 100%) !important;
  border: 1px solid rgba(34, 211, 238, 0.2);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.65);
  position: relative;
  overflow: hidden;
}
/* Animated wave bands */
.game-area:has(.coin-wrap)::before {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 48%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(8, 145, 178, 0.25) 40%, rgba(12, 74, 110, 0.6) 100%);
  border-top: 1px solid rgba(34, 211, 238, 0.35);
  pointer-events: none;
}
.game-area:has(.coin-wrap)::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 15% 20%, #fff, transparent),
    radial-gradient(1px 1px at 78% 14%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 8%, #fff, transparent),
    radial-gradient(1px 1px at 68% 26%, #fff, transparent);
  opacity: 0.6;
  pointer-events: none;
}
/* Coin: richer gold with darker inset to read as doubloon */
.game-area:has(.coin-wrap) .coin {
  background: radial-gradient(circle at 35% 35%, #fef3c7 0%, #d4af37 45%, #78350f 100%);
  box-shadow: 0 10px 40px rgba(251, 191, 36, 0.35), inset 0 0 0 2px rgba(120, 53, 15, 0.6);
}

.game-area:has(.dice-wrap) {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(245, 158, 11, 0.2) 0%, transparent 55%),
    linear-gradient(180deg, #3d1c08 0%, #1a0a02 100%),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(69, 26, 3, 0.4) 38px 40px) !important;
  border: 1px solid rgba(146, 64, 14, 0.4);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}
/* Wood grain ::before overlay */
.game-area:has(.dice-wrap)::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 78px,
      rgba(69, 26, 3, 0.5) 78px 80px,
      transparent 80px 160px);
  opacity: 0.35;
  pointer-events: none;
}
.game-area:has(.dice-wrap) .dice-result-big {
  color: #fef3c7 !important;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
  font-family: 'Georgia', serif;
}
.game-area:has(.dice-wrap) .dice-bar {
  background: #5a2b0e;
  border: 1px solid rgba(146, 64, 14, 0.6);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.game-area:has(.dice-wrap) .dice-bar-fill {
  background: linear-gradient(90deg, #d4af37, #fbbf24);
}
.game-area:has(.dice-wrap) .dice-marker {
  background: #fef3c7;
  box-shadow: 0 0 8px rgba(254, 243, 199, 0.6);
}

.game-area:has(.mines-grid) {
  background:
    radial-gradient(ellipse at 50% 15%, rgba(251, 191, 36, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(184, 134, 11, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, #2a1a0a 0%, #14090a 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}
.game-area:has(.mines-grid)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(212, 175, 55, 0.05) 28px 29px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(212, 175, 55, 0.05) 28px 29px);
  pointer-events: none;
}
/* Retint mine tiles — sandstone instead of default blue-grey */
.game-area:has(.mines-grid) .mine-tile {
  background: linear-gradient(145deg, #5a3a20 0%, #2e1a0c 100%);
  border-color: rgba(212, 175, 55, 0.35);
}
.game-area:has(.mines-grid) .mine-tile:hover:not(.revealed):not(.disabled) {
  background: linear-gradient(145deg, #6a4628 0%, #3a1f0f 100%);
  border-color: #d4af37;
}
.game-area:has(.mines-grid) .mine-tile.safe {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.35) 0%, rgba(120, 53, 15, 0.25) 100%);
  border-color: #d4af37;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.5), inset 0 0 16px rgba(212, 175, 55, 0.2);
}
.game-area:has(.mines-grid) .mine-tile.bomb {
  background: rgba(139, 18, 30, 0.35);
  border-color: #b91c1c;
}

.game-area:has(#crash-canvas) {
  background:
    radial-gradient(ellipse at 75% 25%, rgba(236, 72, 153, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 25% 85%, rgba(34, 211, 238, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 70%),
    linear-gradient(180deg, #0a0a2a 0%, #02010a 100%) !important;
  border: 1px solid rgba(34, 211, 238, 0.22);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}
/* Starfield overlay: small random twinkling dots */
.game-area:has(#crash-canvas)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 18%, #fff, transparent),
    radial-gradient(1px 1px at 42% 31%, #fff, transparent),
    radial-gradient(2px 2px at 68% 12%, #fff, transparent),
    radial-gradient(1px 1px at 82% 45%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 25% 62%, #fff, transparent),
    radial-gradient(1px 1px at 55% 78%, #fff, transparent),
    radial-gradient(2px 2px at 88% 82%, #fff, transparent),
    radial-gradient(1px 1px at 10% 90%, #fff, transparent);
  opacity: 0.55;
  pointer-events: none;
  animation: crashStarTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes crashStarTwinkle { from { opacity: 0.35; } to { opacity: 0.7; } }

.game-area:has(#roul-wheel) {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(220, 38, 38, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #2a0a0a 0%, #180404 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}
.game-area:has(#roul-wheel)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(212, 175, 55, 0.04) 20px 21px),
    repeating-linear-gradient(-45deg, transparent 0 20px, rgba(212, 175, 55, 0.04) 20px 21px);
  pointer-events: none;
}
.game-area:has(.plinko-canvas)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(139, 110, 74, 0.08) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(139, 110, 74, 0.08) 31px 32px);
  pointer-events: none;
}

/* ==================== CRASH ==================== */
.crash-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.crash-mult {
  font-size: 80px;
  font-weight: 800;
  color: var(--text-bright);
  transition: color 0.2s, text-shadow 0.15s;
  font-variant-numeric: tabular-nums;
  transform: scale(var(--mult-scale, 1));
  text-shadow: 0 0 calc(var(--mult-glow, 0) * 24px) rgba(255, 255, 255, calc(var(--mult-glow, 0) * 0.6));
  will-change: transform, text-shadow;
}
.crash-mult.win { color: var(--accent); text-shadow: 0 0 80px var(--accent-glow); animation: crashWinPulse 0.6s ease-out; }
.crash-mult.lose { color: var(--red); text-shadow: 0 0 80px var(--red-glow); animation: crashShatter 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes crashWinPulse {
  0%   { transform: scale(var(--mult-scale, 1)); }
  40%  { transform: scale(calc(var(--mult-scale, 1) * 1.25)); }
  100% { transform: scale(var(--mult-scale, 1)); }
}
@keyframes crashShatter {
  0%   { transform: scale(var(--mult-scale, 1)) translate(0,0) rotate(0); }
  15%  { transform: scale(calc(var(--mult-scale, 1) * 1.1)) translate(-6px, 2px) rotate(-1.5deg); }
  30%  { transform: scale(var(--mult-scale, 1)) translate(5px, -2px) rotate(2deg); }
  45%  { transform: scale(calc(var(--mult-scale, 1) * 0.95)) translate(-3px, 4px) rotate(-1deg); }
  60%  { transform: scale(calc(var(--mult-scale, 1) * 0.9)) translate(3px, -3px) rotate(0.5deg); filter: blur(0.5px); }
  100% { transform: scale(calc(var(--mult-scale, 1) * 0.85)) translate(0, 6px) rotate(0); filter: blur(0); opacity: 0.92; }
}
.crash-label { font-size: 14px; color: var(--text-secondary); margin-top: 8px; font-weight: 600; }

/* ==================== LIMBO ==================== */
.limbo-result {
  font-size: 80px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-bright);
  transform: scale(var(--limbo-scale, 1));
  transition: color 0.2s, text-shadow 0.2s;
  will-change: transform;
}
.limbo-result.win {
  color: var(--accent);
  text-shadow: 0 0 60px var(--accent-glow);
  animation: limboWinPop 0.7s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.limbo-result.lose {
  color: var(--red);
  text-shadow: 0 0 40px var(--red-glow);
}
.limbo-result.near-miss {
  color: #f0b90b;
  text-shadow: 0 0 40px rgba(240, 185, 11, 0.6);
  animation: limboNearMissFlash 0.6s ease-in-out 2;
}
@keyframes limboWinPop {
  0%   { transform: scale(var(--limbo-scale, 1)); }
  40%  { transform: scale(calc(var(--limbo-scale, 1) * 1.35)); }
  100% { transform: scale(var(--limbo-scale, 1)); }
}
@keyframes limboNearMissFlash {
  0%, 100% { text-shadow: 0 0 40px rgba(240, 185, 11, 0.6); }
  50%      { text-shadow: 0 0 80px rgba(240, 185, 11, 1); color: #fde047; }
}

/* ==================== SLOTS ==================== */
.slots-display { display: flex; gap: 10px; align-items: center; }
.slot-reel {
  width: 96px;
  height: 110px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.slot-reel.spinning { border-color: var(--accent); }
.slot-reel.settled { animation: slotSettleBounce 0.3s cubic-bezier(0.22, 1.2, 0.36, 1); }
.slot-strip {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slot-strip > .slot-cell {
  flex: 0 0 110px;
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
}
@keyframes slotSettleBounce {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-6px); }
  70%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

/* ==================== VIP CARD (wallet) ==================== */
.vip-card {
  margin-bottom: 16px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(168, 85, 247, 0.55);
  background:
    radial-gradient(ellipse at 90% -10%, rgba(168, 85, 247, 0.22), transparent 55%),
    radial-gradient(ellipse at 10% 120%, rgba(236, 72, 153, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(236, 72, 153, 0.04));
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.12);
  position: relative;
  overflow: hidden;
}
.vip-card-active { border-color: rgba(168, 85, 247, 0.8); }
.vip-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.vip-card-eyebrow {
  font-size: 11px;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 800;
}
.vip-card-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-bright);
  margin-top: 6px;
  letter-spacing: -0.3px;
}
.vip-price { color: var(--gold); }
.vip-card-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.45;
}
.vip-subscribe-btn {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  border: 0;
  padding: 10px 20px;
  font-weight: 900;
  border-radius: 100px;
  white-space: nowrap;
  transition: transform 0.15s, filter 0.15s;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
}
.vip-subscribe-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.vip-cancel-btn { font-size: 11px; padding: 6px 12px; }
.vip-perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.vip-perk {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(15, 15, 25, 0.35);
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 10px;
  transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.vip-perk:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.38);
  transform: translateY(-1px);
}
.vip-perk-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.vip-perk-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: -0.1px;
}
.vip-perk-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.45;
}
.vip-card-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(168, 85, 247, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
}
.vip-card-footer-btn {
  background: transparent;
  color: var(--purple);
  border: 1px solid rgba(168, 85, 247, 0.5);
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s;
}
.vip-card-footer-btn:hover { background: rgba(168, 85, 247, 0.12); }

/* ==================== BONUS GAMES (batches 46–50) ==================== */
/* Multi-Card Keno */
.keno-mc-page .kmc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.keno-mc-page .kmc-tab { padding: 6px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 100px; font-size: 11px; font-weight: 800; color: var(--text-secondary); cursor: pointer; }
.keno-mc-page .kmc-tab.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.keno-mc-page .kmc-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 540px; margin: 0 auto; }
.keno-mc-page .kmc-num { aspect-ratio: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.keno-mc-page .kmc-num.kmc-active { background: var(--accent); color: #000; border-color: var(--accent); }
.keno-mc-page .kmc-hint { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 10px; }
.keno-mc-page .kmc-drawn { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.keno-mc-page .kmc-drawn-num { padding: 3px 8px; background: var(--bg-input); border-radius: 100px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.keno-mc-page .kmc-drawn-num.kmc-hit { background: var(--accent); color: #000; }

/* Bingo */
.bingo-page .bingo-header { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: 320px; margin: 0 auto 10px; }
.bingo-page .bingo-letter { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: serif; font-size: 22px; font-weight: 900; background: linear-gradient(135deg, var(--accent-bg), transparent); border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); }
.bingo-page .bingo-card { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: 320px; margin: 0 auto; }
.bingo-page .bingo-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.bingo-page .bingo-cell.bingo-marked { background: var(--accent); color: #000; }
.bingo-page .bingo-cell.bingo-center { background: var(--gold); color: #000; }
.bingo-page .bingo-balls { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 14px; max-width: 380px; margin-inline: auto; }
.bingo-page .bingo-ball { padding: 2px 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 100px; font-size: 10px; font-weight: 700; color: var(--text-muted); }

/* Horse Race */
.hr-page .hr-title { font-size: 12px; color: var(--text-muted); text-align: center; letter-spacing: 0.3px; margin-bottom: 14px; }
.hr-page .hr-list { display: flex; flex-direction: column; gap: 8px; max-width: 480px; margin: 0 auto; }
.hr-page .hr-horse { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left; transition: all 0.15s; }
.hr-page .hr-horse.hr-picked { border-color: var(--accent); background: var(--accent-bg); }
.hr-page .hr-horse-color { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 10px currentColor; }
.hr-page .hr-horse-info { flex: 1; }
.hr-page .hr-horse-name { font-size: 13px; font-weight: 800; color: var(--text-bright); }
.hr-page .hr-horse-odds { font-size: 11px; color: var(--text-muted); }
.hr-page .hr-horse-check { font-size: 14px; color: var(--accent); opacity: 0; }
.hr-page .hr-horse.hr-picked .hr-horse-check { opacity: 1; }
.hr-page .hr-track { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.hr-page .hr-lane { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--bg-card); border-radius: 6px; font-size: 12px; }
.hr-page .hr-runner { padding: 2px 10px; border-radius: 100px; color: #fff; font-weight: 700; }
.hr-page .hr-time { color: var(--text-muted); font-family: 'SF Mono', monospace; }

/* Wheel of Fortune */
.wof-page .wof-wrap { position: relative; width: 320px; height: 320px; max-width: 90vw; aspect-ratio: 1; margin: 0 auto; }
.wof-page .wof-pointer { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 26px; color: var(--accent); z-index: 10; }
.wof-page .wof-wheel { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 4px solid var(--accent); box-shadow: 0 0 24px var(--accent-glow); transition: transform 0s; }
.wof-page .wof-seg { position: absolute; inset: 0; transform-origin: 50% 50%; clip-path: polygon(50% 50%, 50% 0, 55% 0); }
.wof-page .wof-center { position: absolute; inset: 42% 42% 42% 42%; background: var(--bg-card); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: var(--accent); border: 2px solid var(--accent); }

/* ==================== PREMIUM ANIMATED THEMES ====================
   Gated at runtime in app.js — subscriber tier for 8 themes, admin
   for the last 2. Each defines the standard color-var set PLUS a
   full-background animation + signature box/border effect. */

/* Premium frame effect: every theme layer uses ::before on the body
   for animated content (particles, waves, scanlines) so existing
   DOM isn't disturbed. */
html[data-theme^="prem-"] body { position: relative; overflow-x: hidden; }
html[data-theme^="prem-"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
html[data-theme^="prem-"] .topbar,
html[data-theme^="prem-"] .main-layout,
html[data-theme^="prem-"] .live-bets-bar { position: relative; z-index: 1; }
/* Info cards + game cards get a signature accent glow on all premium themes */
html[data-theme^="prem-"] .info-card,
html[data-theme^="prem-"] .game-card,
html[data-theme^="prem-"] .game-controls,
html[data-theme^="prem-"] .game-area {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-bg), 0 8px 20px rgba(0, 0, 0, 0.4);
  position: relative;
}
html[data-theme^="prem-"] .game-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 20px var(--accent-glow);
  opacity: 0;
  transition: opacity 0.3s;
}
html[data-theme^="prem-"] .game-card:hover::after { opacity: 1; }

/* ───── 1. Galactic (subscriber) — starfield + pink glow ───── */
html[data-theme="prem-galactic"] {
  --bg-base: #0a0020;
  --bg-sidebar: #0d0428;
  --bg-card: #14084a;
  --bg-input: #1d1062;
  --border: #3b1e8a;
  --text: #e2d4ff;
  --text-bright: #fff;
  --text-secondary: #b39ffb;
  --text-muted: #8278c2;
  --accent: #ec4899;
  --accent-dim: #be185d;
  --accent-bg: rgba(236, 72, 153, 0.15);
  --accent-glow: rgba(236, 72, 153, 0.45);
  --gold: #fbbf24;
  --red: #ef4444;
  --red-glow: rgba(239, 68, 68, 0.4);
}
html[data-theme="prem-galactic"] body::before {
  background:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 40%, #ec4899, transparent),
    radial-gradient(1px 1px at 40% 80%, #a855f7, transparent),
    radial-gradient(2px 2px at 70% 20%, #fff, transparent),
    radial-gradient(1px 1px at 10% 60%, #ec4899, transparent),
    radial-gradient(1.5px 1.5px at 90% 90%, #fff, transparent);
  background-size: 400px 300px;
  background-repeat: repeat;
  animation: galacticDrift 80s linear infinite;
  opacity: 0.6;
}
@keyframes galacticDrift { to { background-position: 400px 300px; } }
html[data-theme="prem-galactic"] .info-card { animation: galacticBoxGlow 4s ease-in-out infinite alternate; }
@keyframes galacticBoxGlow {
  from { box-shadow: 0 0 0 1px var(--accent-bg), 0 0 16px rgba(236, 72, 153, 0.25); }
  to   { box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(236, 72, 153, 0.55); }
}

/* ───── 2. Arcade Neon (subscriber) — magenta + cyan grid ───── */
html[data-theme="prem-arcade"] {
  --bg-base: #08000f;
  --bg-sidebar: #0f0020;
  --bg-card: #160035;
  --bg-input: #200050;
  --border: #6b00b5;
  --text: #ffccff;
  --text-bright: #fff;
  --text-secondary: #cc88ff;
  --text-muted: #9966cc;
  --accent: #00ffff;
  --accent-dim: #00aaaa;
  --accent-bg: rgba(0, 255, 255, 0.12);
  --accent-glow: rgba(255, 0, 255, 0.55);
  --gold: #ffff00;
  --red: #ff0066;
  --red-glow: rgba(255, 0, 102, 0.45);
}
html[data-theme="prem-arcade"] body::before {
  background:
    linear-gradient(rgba(255, 0, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: arcadeGridShift 20s linear infinite;
}
@keyframes arcadeGridShift { to { background-position: 24px 24px; } }
html[data-theme="prem-arcade"] .info-card,
html[data-theme="prem-arcade"] .game-card { animation: arcadeNeonPulse 2s ease-in-out infinite alternate; }
@keyframes arcadeNeonPulse {
  from { box-shadow: 0 0 12px rgba(0, 255, 255, 0.3), inset 0 0 12px rgba(255, 0, 255, 0.15); }
  to   { box-shadow: 0 0 24px rgba(0, 255, 255, 0.7), inset 0 0 18px rgba(255, 0, 255, 0.4); }
}

/* ───── 3. Casino Royale (subscriber) — velvet + gold trim ───── */
html[data-theme="prem-royale"] {
  --bg-base: #0a0000;
  --bg-sidebar: #150000;
  --bg-card: #1f0404;
  --bg-input: #2a0808;
  --border: #8b6914;
  --text: #f4dfad;
  --text-bright: #fffbeb;
  --text-secondary: #d4b872;
  --text-muted: #a08346;
  --accent: #fbbf24;
  --accent-dim: #b8860b;
  --accent-bg: rgba(251, 191, 36, 0.18);
  --accent-glow: rgba(251, 191, 36, 0.5);
  --gold: #fbbf24;
  --red: #dc2626;
  --red-glow: rgba(220, 38, 38, 0.5);
}
html[data-theme="prem-royale"] body::before {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(251, 191, 36, 0.08), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(139, 0, 0, 0.15), transparent 50%);
  animation: royaleEmberDrift 14s ease-in-out infinite alternate;
}
@keyframes royaleEmberDrift {
  from { background-position: 0 0; }
  to   { background-position: 60px -40px; }
}
html[data-theme="prem-royale"] .info-card,
html[data-theme="prem-royale"] .game-card {
  background-image: linear-gradient(135deg, rgba(251, 191, 36, 0.05), transparent 60%);
}

/* ───── 4. Cyberpunk (subscriber) — matrix rain + magenta ───── */
html[data-theme="prem-cyber"] {
  --bg-base: #000008;
  --bg-sidebar: #040012;
  --bg-card: #0a0020;
  --bg-input: #14003a;
  --border: #a855f7;
  --text: #e0b8ff;
  --text-bright: #fff;
  --text-secondary: #b088d8;
  --text-muted: #7854a8;
  --accent: #ff00aa;
  --accent-dim: #b80077;
  --accent-bg: rgba(255, 0, 170, 0.15);
  --accent-glow: rgba(255, 0, 170, 0.55);
  --gold: #00ffdd;
  --red: #ff3366;
  --red-glow: rgba(255, 51, 102, 0.5);
}
html[data-theme="prem-cyber"] body::before {
  background:
    repeating-linear-gradient(180deg, transparent 0, rgba(0, 255, 170, 0.06) 2px, transparent 4px, transparent 80px),
    linear-gradient(180deg, transparent, rgba(168, 85, 247, 0.12));
  animation: cyberRain 6s linear infinite;
}
@keyframes cyberRain { to { background-position: 0 80px, 0 0; } }
html[data-theme="prem-cyber"] .game-card { animation: cyberBorderScan 3s linear infinite; }
@keyframes cyberBorderScan {
  0% { border-color: #ff00aa; }
  50% { border-color: #00ffdd; }
  100% { border-color: #ff00aa; }
}

/* ───── 5. Ocean Depths (subscriber) — slow waves ───── */
html[data-theme="prem-ocean"] {
  --bg-base: #001020;
  --bg-sidebar: #001830;
  --bg-card: #002040;
  --bg-input: #002c58;
  --border: #0e7490;
  --text: #a5e2ff;
  --text-bright: #f0faff;
  --text-secondary: #7dc7e8;
  --text-muted: #4a8eb0;
  --accent: #06b6d4;
  --accent-dim: #0e7490;
  --accent-bg: rgba(6, 182, 212, 0.14);
  --accent-glow: rgba(6, 182, 212, 0.5);
  --gold: #fbbf24;
  --red: #f43f5e;
  --red-glow: rgba(244, 63, 94, 0.5);
}
html[data-theme="prem-ocean"] body::before {
  background:
    radial-gradient(ellipse at 30% 80%, rgba(6, 182, 212, 0.2), transparent 50%),
    radial-gradient(ellipse at 70% 20%, rgba(14, 116, 144, 0.3), transparent 60%);
  animation: oceanWaves 10s ease-in-out infinite alternate;
}
@keyframes oceanWaves {
  from { background-position: 0 0; transform: translateY(0); }
  to   { background-position: -50px 30px; transform: translateY(-5px); }
}

/* ───── 6. Forest Night (subscriber) — leaf fall + fog ───── */
html[data-theme="prem-forest"] {
  --bg-base: #0a1f0a;
  --bg-sidebar: #0c2818;
  --bg-card: #14321e;
  --bg-input: #1a4024;
  --border: #2d5a38;
  --text: #c8e8c8;
  --text-bright: #e8f8e8;
  --text-secondary: #88b890;
  --text-muted: #608060;
  --accent: #22c55e;
  --accent-dim: #15803d;
  --accent-bg: rgba(34, 197, 94, 0.12);
  --accent-glow: rgba(34, 197, 94, 0.45);
  --gold: #fbbf24;
  --red: #ef4444;
  --red-glow: rgba(239, 68, 68, 0.4);
}
html[data-theme="prem-forest"] body::before {
  background:
    radial-gradient(1px 3px at 20% 10%, #d97706, transparent),
    radial-gradient(1px 3px at 60% 30%, #b45309, transparent),
    radial-gradient(1px 2px at 80% 50%, #f97316, transparent),
    radial-gradient(1px 3px at 30% 70%, #d97706, transparent),
    radial-gradient(1px 2px at 90% 80%, #b45309, transparent);
  background-size: 600px 800px;
  animation: forestLeafFall 40s linear infinite;
  opacity: 0.5;
}
@keyframes forestLeafFall { to { background-position: -60px 800px; } }

/* ───── 7. Inferno (subscriber) — ember rise ───── */
html[data-theme="prem-inferno"] {
  --bg-base: #1a0404;
  --bg-sidebar: #250808;
  --bg-card: #330f0f;
  --bg-input: #451818;
  --border: #7f1d1d;
  --text: #fed7aa;
  --text-bright: #fff7ed;
  --text-secondary: #fb923c;
  --text-muted: #c2410c;
  --accent: #f97316;
  --accent-dim: #c2410c;
  --accent-bg: rgba(249, 115, 22, 0.15);
  --accent-glow: rgba(249, 115, 22, 0.55);
  --gold: #fbbf24;
  --red: #dc2626;
  --red-glow: rgba(220, 38, 38, 0.6);
}
html[data-theme="prem-inferno"] body::before {
  background:
    radial-gradient(2px 4px at 20% 90%, #f97316, transparent),
    radial-gradient(1px 3px at 50% 80%, #fbbf24, transparent),
    radial-gradient(1.5px 3px at 80% 95%, #dc2626, transparent),
    radial-gradient(1px 2px at 35% 70%, #f97316, transparent),
    radial-gradient(2px 3px at 65% 85%, #fbbf24, transparent);
  background-size: 500px 600px;
  animation: infernoEmberRise 12s linear infinite;
  opacity: 0.7;
}
@keyframes infernoEmberRise { to { background-position: 0 -600px; } }
html[data-theme="prem-inferno"] .info-card { animation: infernoHeat 3s ease-in-out infinite alternate; }
@keyframes infernoHeat {
  from { box-shadow: 0 0 0 1px var(--accent-bg), 0 0 14px rgba(249, 115, 22, 0.3); }
  to   { box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(220, 38, 38, 0.5); }
}

/* ───── 8. Arctic (subscriber) — snow + aurora ───── */
html[data-theme="prem-arctic"] {
  --bg-base: #050818;
  --bg-sidebar: #08102a;
  --bg-card: #0f1838;
  --bg-input: #152050;
  --border: #3c5ea8;
  --text: #d0e8ff;
  --text-bright: #f0f8ff;
  --text-secondary: #8ab4e0;
  --text-muted: #5070a8;
  --accent: #7dd3fc;
  --accent-dim: #0284c7;
  --accent-bg: rgba(125, 211, 252, 0.15);
  --accent-glow: rgba(125, 211, 252, 0.5);
  --gold: #fde047;
  --red: #f43f5e;
  --red-glow: rgba(244, 63, 94, 0.4);
}
html[data-theme="prem-arctic"] body::before {
  background:
    radial-gradient(2px 2px at 20% 10%, #fff, transparent),
    radial-gradient(1px 1px at 50% 30%, #fff, transparent),
    radial-gradient(2px 2px at 80% 50%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent),
    linear-gradient(180deg, rgba(125, 211, 252, 0.12), transparent 40%, rgba(168, 85, 247, 0.08));
  background-size: 400px 500px, 400px 500px, 400px 500px, 400px 500px, 100% 100%;
  animation: arcticSnowFall 25s linear infinite;
  opacity: 0.55;
}
@keyframes arcticSnowFall {
  to { background-position: 20px 500px, -10px 500px, 30px 500px, -20px 500px, 0 0; }
}

/* ───── 9. Obsidian (ADMIN) — diamond facets + platinum ───── */
html[data-theme="prem-obsidian"] {
  --bg-base: #000;
  --bg-sidebar: #050505;
  --bg-card: #0a0a0a;
  --bg-input: #121212;
  --border: #3a3a3a;
  --text: #e0e0e0;
  --text-bright: #fff;
  --text-secondary: #a8a8a8;
  --text-muted: #686868;
  --accent: #e5e4e2;
  --accent-dim: #8a8a8a;
  --accent-bg: rgba(229, 228, 226, 0.1);
  --accent-glow: rgba(229, 228, 226, 0.4);
  --gold: #d4af37;
  --red: #dc2626;
  --red-glow: rgba(220, 38, 38, 0.4);
}
html[data-theme="prem-obsidian"] body::before {
  background:
    linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.03) 49%, rgba(255, 255, 255, 0.03) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.03) 49%, rgba(255, 255, 255, 0.03) 51%, transparent 52%);
  background-size: 60px 60px;
  animation: obsidianFacetShift 8s ease-in-out infinite alternate;
}
@keyframes obsidianFacetShift {
  from { background-position: 0 0, 0 0; opacity: 0.6; }
  to   { background-position: 30px 30px, -30px 30px; opacity: 1; }
}
html[data-theme="prem-obsidian"] .info-card,
html[data-theme="prem-obsidian"] .game-card {
  border-color: #3a3a3a;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 40%, rgba(212, 175, 55, 0.05));
  animation: obsidianShimmer 5s ease-in-out infinite alternate;
}
@keyframes obsidianShimmer {
  from { box-shadow: 0 0 0 1px #3a3a3a, 0 4px 12px rgba(0, 0, 0, 0.6); }
  to   { box-shadow: 0 0 0 1px #e5e4e2, 0 6px 22px rgba(229, 228, 226, 0.25); }
}

/* ───── 10. Plasma (ADMIN) — rainbow breathing everywhere ───── */
html[data-theme="prem-plasma"] {
  --bg-base: #020008;
  --bg-sidebar: #050012;
  --bg-card: #0a0020;
  --bg-input: #14003a;
  --border: #ec4899;
  --text: #ffeaff;
  --text-bright: #fff;
  --text-secondary: #d8b8ff;
  --text-muted: #9070b0;
  --accent: #ec4899;
  --accent-dim: #b83280;
  --accent-bg: rgba(236, 72, 153, 0.15);
  --accent-glow: rgba(236, 72, 153, 0.6);
  --gold: #facc15;
  --red: #fb7185;
  --red-glow: rgba(251, 113, 133, 0.55);
}
html[data-theme="prem-plasma"] body::before {
  background:
    radial-gradient(ellipse at 0% 0%, #ec4899 0%, transparent 40%),
    radial-gradient(ellipse at 100% 0%, #a855f7 0%, transparent 40%),
    radial-gradient(ellipse at 100% 100%, #06b6d4 0%, transparent 40%),
    radial-gradient(ellipse at 0% 100%, #22c55e 0%, transparent 40%);
  opacity: 0.22;
  animation: plasmaBreathe 8s ease-in-out infinite alternate;
  filter: blur(40px);
}
@keyframes plasmaBreathe {
  from { opacity: 0.15; transform: scale(1) rotate(0deg); }
  to   { opacity: 0.32; transform: scale(1.1) rotate(8deg); }
}
html[data-theme="prem-plasma"] .info-card,
html[data-theme="prem-plasma"] .game-card { animation: plasmaBorder 4s linear infinite; }
@keyframes plasmaBorder {
  0%   { border-color: #ec4899; box-shadow: 0 0 20px rgba(236, 72, 153, 0.5); }
  25%  { border-color: #a855f7; box-shadow: 0 0 20px rgba(168, 85, 247, 0.5); }
  50%  { border-color: #06b6d4; box-shadow: 0 0 20px rgba(6, 182, 212, 0.5); }
  75%  { border-color: #22c55e; box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); }
  100% { border-color: #ec4899; box-shadow: 0 0 20px rgba(236, 72, 153, 0.5); }
}

/* Respect reduced-motion preference on all premium themes */
html[data-reduced-motion="1"][data-theme^="prem-"] body::before,
html[data-reduced-motion="1"][data-theme^="prem-"] .info-card,
html[data-reduced-motion="1"][data-theme^="prem-"] .game-card {
  animation: none !important;
}

/* ==================== SIDEBAR PROMO BANNER ==================== */
.sidebar-promo {
  position: fixed;
  left: 10px;
  bottom: 118px; /* above the sidebar-install + sidebar-discord sticky CTAs */
  width: calc(var(--sidebar-w) - 20px);
  max-width: 220px;
  padding: 14px 14px 12px;
  background: linear-gradient(145deg, var(--promo-accent, #fbbf24) 0%, rgba(0,0,0,0.85) 130%);
  border: 1px solid var(--promo-accent, #fbbf24);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 14px rgba(251, 191, 36, 0.15);
  z-index: 50;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: auto;
}
.sidebar-promo-show { opacity: 1; transform: translateY(0); }
.sidebar-promo[hidden] { display: none !important; }
.sidebar-promo-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.sidebar-promo-close:hover { opacity: 1; background: rgba(239, 68, 68, 0.8); }
.sidebar-promo-icon { font-size: 20px; line-height: 1; margin-bottom: 6px; }
.sidebar-promo-title {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.2px;
  line-height: 1.2;
  margin-bottom: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.sidebar-promo-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  margin-bottom: 10px;
  line-height: 1.35;
}
.sidebar-promo-cta {
  display: inline-block;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 800;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.sidebar-promo-cta:hover { transform: translateY(-1px); filter: brightness(1.1); }
@media (max-width: 900px) {
  /* Mobile: reposition to bottom-right clear of the 3 FABs (install/
     discord/chat stacked at right:16px). FABs are 52px wide + 16px
     right margin = they occupy right:0 to right:68px. Banner sits
     above/beside them: right:82px, narrower width, above the live-
     bets strip. Auto-hide on very small screens where even this
     would crowd the play area. */
  .sidebar-promo {
    left: auto;
    right: 82px;
    bottom: 80px;
    width: min(200px, calc(100vw - 100px));
    max-width: 210px;
    padding: 10px 12px 10px;
  }
  .sidebar-promo-title { font-size: 12px; }
  .sidebar-promo-sub   { font-size: 10px; margin-bottom: 6px; }
  .sidebar-promo-icon  { font-size: 16px; margin-bottom: 4px; }
  .sidebar-promo-cta   { font-size: 10px; padding: 4px 8px; }
}
@media (max-width: 380px) {
  /* Ultra-small screens: skip the promo entirely — not worth the crowd */
  .sidebar-promo { display: none; }
}

/* ==================== QUICK PACK PICKER ==================== */
.pack-picker {
  position: relative;
  max-width: 560px;
  width: 100%;
  padding: 24px 22px 18px;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-sidebar) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
  transform: translateY(14px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reload-modal-show .pack-picker { transform: translateY(0) scale(1); }
.pack-picker-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-bright);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.pack-picker-reason {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
}
.pack-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pack-picker .pack-card {
  position: relative;
  padding: 16px 12px 14px;
  background: linear-gradient(160deg, rgba(0,0,0,0.4) 0%, transparent 100%), var(--bg-input);
  border: 1px solid var(--pack-accent, var(--border));
  border-radius: 12px;
  color: var(--text-bright);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
  font-family: inherit;
}
.pack-picker .pack-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--pack-accent, rgba(255,255,255,0.1)), 0 0 0 1px var(--pack-accent, var(--border));
}
.pack-card-badge {
  position: absolute;
  top: -7px;
  right: 8px;
  padding: 2px 8px;
  background: var(--pack-accent);
  color: #000;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 100px;
}
.pack-card-name {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pack-accent);
  margin-bottom: 8px;
}
.pack-card-cr {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-bright);
  line-height: 1;
  margin-bottom: 3px;
}
.pack-card-cr span { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-left: 3px; }
.pack-card-ca {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 10px;
}
.pack-card-ca span { font-size: 10px; color: var(--text-muted); font-weight: 700; }
.pack-card-price {
  padding: 6px 10px;
  background: rgba(0,0,0,0.5);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 900;
  color: var(--text-bright);
  display: inline-block;
}
.pack-picker-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
.pack-picker-discord {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #5865f2, #4752c4);
  color: #fff;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s;
}
.pack-picker-discord:hover { transform: translateY(-1px); filter: brightness(1.1); }
.pack-picker-discord b {
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  font-weight: 900;
}
@media (max-width: 520px) {
  .pack-picker { padding: 20px 16px 14px; }
  .pack-picker-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
  .pack-card-cr { font-size: 19px; }
}

/* ==================== RELOAD MODAL ==================== */
.reload-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.reload-modal-show { opacity: 1; }
.reload-modal {
  position: relative;
  max-width: 420px;
  width: 100%;
  padding: 28px 24px 20px;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-sidebar) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  text-align: center;
  transform: translateY(14px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reload-modal-show .reload-modal { transform: translateY(0) scale(1); }
.reload-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.reload-modal-close:hover { background: rgba(255, 255, 255, 0.18); color: var(--text-bright); }
.reload-modal-icon {
  display: flex;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 10px;
  filter: drop-shadow(0 0 14px rgba(240, 185, 11, 0.5));
}
.reload-modal-reason {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.reload-modal-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-bright);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.reload-modal-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.reload-modal-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.reload-modal-btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.reload-modal-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.reload-modal-btn-primary {
  background: var(--accent);
  color: #000;
}
.reload-modal-btn-discord {
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  color: #fff;
}
.reload-modal-btn-discord b {
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  margin-left: 4px;
}
.reload-modal-foot {
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
@media (max-width: 480px) {
  .reload-modal { padding: 22px 18px 16px; }
  .reload-modal-title { font-size: 19px; }
}

/* Big-win drama: pulse frame border + glow on high multipliers */
.slot-eng-win-flash {
  animation: slotEngWinFlash 1.4s cubic-bezier(0.32, 0.72, 0.28, 1.1);
}
@keyframes slotEngWinFlash {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); transform: scale(1); }
  25%  { box-shadow: 0 0 40px 10px rgba(251, 191, 36, 0.75); transform: scale(1.015); }
  60%  { box-shadow: 0 0 60px 6px rgba(251, 191, 36, 0.5); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); transform: scale(1); }
}

/* Crate: sustained pulse on legendary + mythic winner card */
.crate-item-rare-win {
  animation: crateRareWinPulse 1.4s ease-in-out infinite alternate !important;
}
@keyframes crateRareWinPulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.35) saturate(1.2); }
}

/* ==================== SUGAR RUSH (cluster-pays 7×7) ==================== */
.sugar-page .sugar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(36px, 1fr));
  gap: 4px;
  max-width: 500px;
  margin: 0 auto;
  background: radial-gradient(ellipse, rgba(236, 72, 153, 0.15) 0%, transparent 65%);
  padding: 10px;
  border-radius: 14px;
}
.sugar-page .sugar-cell {
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(236, 72, 153, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: all 0.25s ease;
}
.sugar-page .sugar-cell svg { width: 100%; height: 100%; }
.sugar-page .sugar-cell-win {
  animation: sugarWinPulse 0.6s ease-in-out infinite alternate;
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.65);
  z-index: 2;
}
@keyframes sugarWinPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
.sugar-page .sugar-cell-pop {
  animation: sugarPop 0.35s ease-out forwards;
}
@keyframes sugarPop {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.4); opacity: 0.6; }
  100% { transform: scale(0); opacity: 0; }
}
.sugar-page .sugar-status {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin-top: 6px;
}
@media (max-width: 540px) {
  .sugar-page .sugar-grid { gap: 3px; padding: 6px; }
}

/* ==================== SLOT ENGINE (shared by 16 themed slots) ==================== */
.slot-eng-frame {
  border: 2px solid;
  border-radius: 14px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.slot-eng-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}
.slot-eng-reel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.slot-eng-cell {
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.4));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot-eng-cell svg { width: 80%; height: 80%; }
.slot-eng-cell-stack {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(180, 83, 9, 0.2));
  border-color: rgba(251, 191, 36, 0.5);
}
.slot-eng-reel-stack {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.45);
}
.slot-eng-reel-expanded {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.2), rgba(217, 119, 6, 0.3));
  border-color: #fde68a;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.55);
}
.slot-eng-reel.slot-eng-spin .slot-eng-cell {
  filter: blur(1.2px);
  animation: slotEngSpinBg 0.1s linear infinite;
}
@keyframes slotEngSpinBg {
  from { transform: translateY(-2px); }
  to   { transform: translateY(2px); }
}
.slot-eng-label {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 14px;
}
.slot-eng-fs-banner {
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(217, 119, 6, 0.14));
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 10px;
  text-align: center;
}
.slot-eng-fs-title { color: #fde68a; font-weight: 900; letter-spacing: 3px; font-size: 13px; }
.slot-eng-fs-sub   { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
@media (max-width: 640px) {
  .slot-eng-frame { padding: 12px; }
  .slot-eng-grid { gap: 4px; }
  .slot-eng-reel { padding: 4px; }
}

/* ==================== SCRATCH THEMED VARIANTS ==================== */
.scratch-themed-page .scratch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin: 14px auto 0;
}
.scratch-themed-page .scratch-tile {
  aspect-ratio: 1;
  min-width: 84px;
  min-height: 84px;
  position: relative;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
}
.scratch-themed-page .scratch-tile:hover { transform: translateY(-1px); }
.scratch-themed-page .scratch-tile-cover {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 1;
}
.scratch-themed-page .scratch-tile-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.scratch-themed-page .scratch-tile-winner {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  animation: scratchWinPulse 1s ease-in-out infinite alternate;
}
@keyframes scratchWinPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}
.scratch-themed-page .scratch-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
  letter-spacing: 0.3px;
}

/* ==================== CRATE THEMED VARIANTS ==================== */
.crate-themed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid;
  border-radius: 100px;
  font-size: 12px;
  flex-wrap: wrap;
}
.crate-themed-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px currentColor;
}
.crate-themed-label {
  font-weight: 900;
  color: var(--text-bright);
  letter-spacing: 0.3px;
}
.crate-themed-desc {
  color: var(--text-muted);
  font-size: 11px;
}

/* ==================== SLOT-ZEUS (Zeus Rising) ==================== */
.zeus-frame {
  background: radial-gradient(ellipse at top, #1e3a8a 0%, #0f172a 55%, #020617 100%);
  border: 2px solid #3b82f6;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25), inset 0 0 0 1px rgba(251, 191, 36, 0.2);
  position: relative;
  overflow: hidden;
}
.zeus-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(251, 191, 36, 0.12), transparent 55%);
  pointer-events: none;
}
.zeus-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}
.zeus-reel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: #0f172a;
  border: 1px solid rgba(59, 130, 246, 0.38);
  border-radius: 8px;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.zeus-cell {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #1e3a8a, #0f172a);
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.zeus-cell svg { width: 80%; height: 80%; }
.zeus-cell-stack {
  background: linear-gradient(135deg, #fbbf24, #b45309);
  border-color: #fde68a;
}
.zeus-reel-stack {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(180, 83, 9, 0.3));
  border-color: #fde68a;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.5);
}
.zeus-reel.zeus-spin .zeus-cell {
  filter: blur(1.2px);
  animation: zeusSpinBg 0.1s linear infinite;
}
@keyframes zeusSpinBg {
  from { transform: translateY(-2px); }
  to   { transform: translateY(2px); }
}
.zeus-label {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
}
.zeus-freespins-banner {
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(59, 130, 246, 0.18));
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 10px;
  text-align: center;
}
.zeus-fs-title { color: #fde68a; font-weight: 900; letter-spacing: 3px; font-size: 14px; text-shadow: 0 0 10px rgba(251, 191, 36, 0.6); }
.zeus-fs-sub { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
@media (max-width: 640px) {
  .zeus-frame { padding: 12px; }
  .zeus-grid { gap: 4px; }
  .zeus-reel { padding: 4px; }
}

/* ==================== SLOT-FRUIT (Fruit 777) ==================== */
.fruit-frame {
  background: linear-gradient(180deg, #1c0606 0%, #3c0a0a 100%);
  border: 3px solid #fbbf24;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3), inset 0 0 0 1px rgba(251, 191, 36, 0.25);
}
.fruit-display { display: flex; gap: 10px; justify-content: center; }
.fruit-reel {
  width: 100px;
  height: 110px;
  background: #0c0303;
  border: 3px solid #fbbf24;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.fruit-reel svg { width: 100%; height: 100%; }
.fruit-reel.fruit-spin {
  animation: fruitSpin 0.08s linear infinite;
  border-color: #dc2626;
}
@keyframes fruitSpin {
  from { transform: translateY(-3px); }
  to   { transform: translateY(3px); }
}
.fruit-reel-win {
  border-color: #22c55e;
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.7);
  animation: fruitWin 0.4s ease-in-out infinite alternate;
}
@keyframes fruitWin {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}
.fruit-paybar {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  font-size: 11px;
  color: #fde68a;
  font-weight: 700;
}
.fruit-label {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 14px;
  letter-spacing: 0.5px;
}
@media (max-width: 540px) {
  .fruit-reel { width: 78px; height: 90px; padding: 6px; }
  .fruit-frame { padding: 14px; }
}

/* ==================== SLOT-EGYPT (Book of Kings) ==================== */
.egy-frame {
  background: linear-gradient(135deg, #451a03 0%, #1c0a02 100%);
  border: 2px solid #b45309;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(146, 64, 14, 0.3), inset 0 0 0 1px rgba(251, 191, 36, 0.18);
}
.egy-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 560px;
  margin: 0 auto;
}
.egy-reel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: #1c0a02;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 8px;
  overflow: hidden;
}
.egy-cell {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #78350f, #451a03);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.egy-cell svg { width: 80%; height: 80%; }
.egy-cell-hit {
  background: linear-gradient(135deg, #fbbf24, #b45309);
  border-color: #fde68a;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
  animation: egyPulse 1s ease-in-out infinite alternate;
}
@keyframes egyPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}
.egy-reel.egy-spin .egy-cell {
  filter: blur(1.2px);
  animation: egySpinBg 0.1s linear infinite;
}
@keyframes egySpinBg {
  from { transform: translateY(-2px); }
  to   { transform: translateY(2px); }
}
.egy-reel-expanded {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.2), rgba(217, 119, 6, 0.35));
  border-color: #fde68a;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.5);
}
.egy-label {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
  letter-spacing: 0.3px;
}
.egy-freespins-banner {
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(180, 83, 9, 0.18));
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 10px;
  text-align: center;
}
.egy-fs-title { color: #fde68a; font-weight: 900; letter-spacing: 3px; font-size: 13px; }
.egy-fs-sub   { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }

@media (max-width: 640px) {
  .egy-frame { padding: 12px; }
  .egy-grid { gap: 4px; }
  .egy-reel { padding: 4px; }
}

/* ==================== DICE ==================== */
.dice-wrap { width: 85%; padding: 20px; }
.dice-result-big {
  font-size: 64px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 24px;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.dice-bar {
  width: 100%;
  height: 8px;
  background: var(--red);
  border-radius: 100px;
  position: relative;
  margin: 16px 0;
}
.dice-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  transition: width 0.2s;
}
.dice-marker {
  position: absolute;
  top: -6px;
  width: 3px;
  height: 20px;
  background: var(--text-bright);
  border-radius: 2px;
  transition: left 0.2s;
}
.dice-result-marker {
  position: absolute;
  top: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text-bright);
  border: 3px solid var(--bg-base);
  transform: translateX(-50%);
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  animation: diceMarkerPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dice-result-marker::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: dicePulseRing 0.8s ease-out 0.15s;
  color: inherit;
}
@keyframes diceMarkerPop {
  0%   { transform: translateX(-50%) scale(0); }
  60%  { transform: translateX(-50%) scale(1.35); }
  100% { transform: translateX(-50%) scale(1); }
}
@keyframes dicePulseRing {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
.dice-result-big.pop { animation: diceResultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes diceResultPop {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.dice-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ==================== COINFLIP ==================== */
.coin {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(145deg, #ffd700, #b8860b);
  color: #1a1a2e;
  box-shadow: 0 8px 32px rgba(255,215,0,0.15);
  transform-style: preserve-3d;
  will-change: transform;
}
.coin-wrap { perspective: 900px; display: inline-block; }
.coin.flip { animation: coinFlip3D 1.1s cubic-bezier(0.25, 0.8, 0.3, 1); }

/* ==================== ROULETTE ==================== */
.roulette-number {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 800;
  border: 3px solid;
  animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.roulette-number.red { background: rgba(237,66,69,0.15); border-color: var(--red); color: var(--red); }
.roulette-number.black { background: rgba(150,150,150,0.1); border-color: #666; color: #ccc; }
.roulette-number.green { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* ==================== INFO / WALLET / FAIRNESS ==================== */
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-sizing: border-box;
}
/* On wide screens, wallet and profile pages flow two cards side by side */
@media (min-width: 900px) {
  .info-card.col-half { max-width: calc(50% - 8px); display: inline-block; vertical-align: top; }
}
.info-card h3 { font-size: 15px; font-weight: 700; color: var(--text-bright); margin-bottom: 12px; }
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.stat-row:last-child { border-bottom: none; }
.stat-label { color: var(--text-secondary); }
.stat-value { font-weight: 600; color: var(--text-bright); }
.mono { font-family: 'Courier New', monospace; font-size: 11px; word-break: break-all; color: var(--text-secondary); }

/* ==================== HISTORY ==================== */
.bet-list { display: flex; flex-direction: column; gap: 4px; max-width: 700px; }
.bet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.bet-row .game { font-weight: 600; width: 72px; color: var(--text-bright); }
.bet-row .amount { color: var(--text-secondary); }
.bet-row .mult { font-weight: 600; color: var(--text-bright); }
.bet-row .profit-positive { color: var(--accent); font-weight: 700; }
.bet-row .profit-negative { color: var(--red); font-weight: 700; }

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes dealCard { 0% { transform: translateY(-30px) rotate(-5deg); opacity: 0; } 100% { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes tileReveal { 0% { transform: scale(0.8); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes coinFlip { 0% { transform: rotateY(0); } 100% { transform: rotateY(720deg); } }
@keyframes coinFlip3D {
  0%   { transform: translateY(0) rotateX(0)    scale(1,1); }
  15%  { transform: translateY(-90px) rotateX(360deg) scale(1.05,0.95); }
  30%  { transform: translateY(-140px) rotateX(720deg) scale(1.1,0.9); }
  50%  { transform: translateY(-160px) rotateX(1080deg) scale(1.1,0.9); }
  70%  { transform: translateY(-90px) rotateX(1440deg) scale(1,1); }
  85%  { transform: translateY(0)    rotateX(1800deg) scale(1.2,0.8); }
  92%  { transform: translateY(-16px) rotateX(1900deg) scale(1,1); }
  100% { transform: translateY(0)    rotateX(1980deg) scale(1,1); }
}
@keyframes slotSpin { 0% { transform: translateY(-3px); } 50% { transform: translateY(3px); } 100% { transform: translateY(-3px); } }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes slideLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.08); } 70% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ripple { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(4); opacity: 0; } }
@keyframes hotStreak { 0%,100% { border-color: #f0b90b; box-shadow: 0 0 15px rgba(240,185,11,0.2); } 50% { border-color: #ef4444; box-shadow: 0 0 25px rgba(239,68,68,0.2); } }
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-50px); } }
@keyframes cardIn { 0% { opacity: 0; transform: translateY(18px) scale(0.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes resultSlam { 0% { transform: scaleY(0.4) translateY(40px); opacity: 0; } 60% { transform: scaleY(1.08) translateY(-4px); opacity: 1; } 80% { transform: scaleY(0.97) translateY(2px); } 100% { transform: scaleY(1) translateY(0); } }
@keyframes emojiFloat { 0% { transform: translate(0,0) rotate(0deg) scale(0.6); opacity: 0; } 15% { opacity: 1; transform: translate(var(--dx-mid),var(--dy-mid)) rotate(calc(var(--rot) * 0.4)) scale(1.15); } 100% { transform: translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(0.4); opacity: 0; } }
@keyframes hotStreakFlicker { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }
@keyframes coinRain { 0% { transform: translateY(-60px) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0.4; } }
@keyframes nearMissFlash { 0%,100% { box-shadow: inset 0 0 0 0 transparent; } 25% { box-shadow: inset 0 0 40px 0 rgba(240,185,11,0.55); } 75% { box-shadow: inset 0 0 40px 0 rgba(240,185,11,0.35); } }
@keyframes toastIn { 0% { transform: translateX(40px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes skeletonShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Theme accent overrides (activated by data-accent on <html>) */
html[data-accent="green"]    { --accent: #00e701; --accent-dim: #00c900; --accent-bg: rgba(0,231,1,0.1);   --accent-glow: rgba(0,231,1,0.4); }
html[data-accent="lime"]     { --accent: #a3e635; --accent-dim: #84cc16; --accent-bg: rgba(163,230,53,0.1); --accent-glow: rgba(163,230,53,0.4); }
html[data-accent="emerald"]  { --accent: #10b981; --accent-dim: #059669; --accent-bg: rgba(16,185,129,0.1); --accent-glow: rgba(16,185,129,0.4); }
html[data-accent="teal"]     { --accent: #14b8a6; --accent-dim: #0d9488; --accent-bg: rgba(20,184,166,0.1); --accent-glow: rgba(20,184,166,0.4); }
html[data-accent="cyan"]     { --accent: #06b6d4; --accent-dim: #0891b2; --accent-bg: rgba(6,182,212,0.1);  --accent-glow: rgba(6,182,212,0.4); }
html[data-accent="sky"]      { --accent: #0ea5e9; --accent-dim: #0284c7; --accent-bg: rgba(14,165,233,0.1); --accent-glow: rgba(14,165,233,0.4); }
html[data-accent="blue"]     { --accent: #3b82f6; --accent-dim: #2563eb; --accent-bg: rgba(59,130,246,0.1); --accent-glow: rgba(59,130,246,0.4); }
html[data-accent="indigo"]   { --accent: #6366f1; --accent-dim: #4f46e5; --accent-bg: rgba(99,102,241,0.1); --accent-glow: rgba(99,102,241,0.4); }
html[data-accent="violet"]   { --accent: #8b5cf6; --accent-dim: #7c3aed; --accent-bg: rgba(139,92,246,0.1); --accent-glow: rgba(139,92,246,0.4); }
html[data-accent="purple"]   { --accent: #a855f7; --accent-dim: #9333ea; --accent-bg: rgba(168,85,247,0.1); --accent-glow: rgba(168,85,247,0.4); }
html[data-accent="fuchsia"]  { --accent: #d946ef; --accent-dim: #c026d3; --accent-bg: rgba(217,70,239,0.1); --accent-glow: rgba(217,70,239,0.4); }
html[data-accent="pink"]     { --accent: #ec4899; --accent-dim: #db2777; --accent-bg: rgba(236,72,153,0.1); --accent-glow: rgba(236,72,153,0.4); }
html[data-accent="rose"]     { --accent: #f43f5e; --accent-dim: #e11d48; --accent-bg: rgba(244,63,94,0.1);  --accent-glow: rgba(244,63,94,0.4); }
html[data-accent="red"]      { --accent: #ef4444; --accent-dim: #dc2626; --accent-bg: rgba(239,68,68,0.1);  --accent-glow: rgba(239,68,68,0.4); }
html[data-accent="orange"]   { --accent: #fb923c; --accent-dim: #ea7c26; --accent-bg: rgba(251,146,60,0.1); --accent-glow: rgba(251,146,60,0.4); }
html[data-accent="amber"]    { --accent: #f59e0b; --accent-dim: #d97706; --accent-bg: rgba(245,158,11,0.1); --accent-glow: rgba(245,158,11,0.4); }
html[data-accent="gold"]     { --accent: #f0b90b; --accent-dim: #ca8a04; --accent-bg: rgba(240,185,11,0.1); --accent-glow: rgba(240,185,11,0.4); }
html[data-accent="white"]    { --accent: #e8e8e8; --accent-dim: #c0c0c0; --accent-bg: rgba(232,232,232,0.1); --accent-glow: rgba(232,232,232,0.4); }

/* Fluid accent transitions — smooth color/background switch when theme/accent changes */
.sidebar-link, .choice-btn, .btn, .wallet-deposit, .game-card, .form-input,
.mobile-nav a, .logo, .logo span, .tab-btn, .info-card, .result-banner .rb-mult,
.result-banner .rb-amt, .sidebar-link.active, .topbar {
  transition: color 0.25s ease, background-color 0.25s ease, background 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease, text-shadow 0.25s ease;
}

/* Reduced motion */
html[data-reduced-motion="1"] *,
html[data-reduced-motion="1"] *::before,
html[data-reduced-motion="1"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Mobile nav active-pill animation */
.mobile-nav a { position: relative; }
.mobile-nav a::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--accent-bg);
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: -1;
}
.mobile-nav a.active::before { opacity: 1; transform: scale(1); }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s infinite linear;
  border-radius: 6px;
  color: transparent;
  user-select: none;
}
.skeleton-card { height: 140px; border-radius: 12px; }
.skeleton-row  { height: 18px; margin-bottom: 8px; }
.skeleton-pill { height: 36px; border-radius: 100px; }

/* Achievement unlock modal */
.achievement-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.95) 100%);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}
.achievement-modal-overlay.closing { animation: fadeIn 0.22s ease reverse forwards; }
.achievement-card {
  position: relative;
  width: min(92vw, 420px);
  padding: 28px 28px 24px;
  background: linear-gradient(150deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 2px solid var(--gold);
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 0 0 6px rgba(240, 185, 11, 0.15), 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: achievementSlam 0.55s cubic-bezier(0.16, 1.2, 0.3, 1);
  overflow: hidden;
}
@keyframes achievementSlam {
  0%   { opacity: 0; transform: scale(0.7) rotate(-4deg); }
  60%  { opacity: 1; transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.achievement-sparkle {
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(240, 185, 11, 0.2) 10deg, transparent 20deg, rgba(240, 185, 11, 0.1) 30deg, transparent 40deg);
  animation: spin 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.achievement-trophy,
.achievement-eyebrow,
.achievement-name,
.achievement-desc,
.achievement-reward,
.achievement-extra,
.achievement-actions { position: relative; z-index: 1; }
.achievement-trophy {
  color: var(--gold);
  filter: drop-shadow(0 0 24px rgba(240, 185, 11, 0.6));
  margin-bottom: 6px;
}
.achievement-trophy svg { width: 48px; height: 48px; }
.achievement-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gold);
  font-weight: 900;
  margin-bottom: 8px;
}
.achievement-name {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-bright);
  text-shadow: 0 0 40px rgba(240, 185, 11, 0.4);
  margin-bottom: 6px;
  line-height: 1.1;
}
.achievement-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.achievement-reward {
  display: inline-block;
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  padding: 8px 24px;
  background: rgba(0, 231, 1, 0.12);
  border: 1px solid var(--accent);
  border-radius: 100px;
  margin-bottom: 16px;
}
.achievement-extra { font-size: 11px; color: var(--text-muted); margin: -8px 0 14px; font-style: italic; }
.achievement-actions { display: flex; gap: 8px; justify-content: center; }
.achievement-actions .btn { min-width: 120px; }

/* Daily quests card on home */
.daily-quests-placeholder { display: none; }
.daily-quests-card {
  padding: 14px 16px 12px;
  background: linear-gradient(140deg, rgba(240, 185, 11, 0.08) 0%, var(--bg-card) 45%);
  border: 1px solid rgba(240, 185, 11, 0.25);
  border-radius: 10px;
}
/* Home stats row: daily quests + profit sparkline side-by-side on wide,
   stacked on narrow. Quests get 2/3 width, sparkline 1/3. */
.home-stats-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
  margin: 14px 0;
}
@media (max-width: 900px) {
  .home-stats-row { grid-template-columns: 1fr; }
}
.dqc-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.dqc-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: var(--gold); letter-spacing: 0.5px;
}
.dqc-title svg { color: var(--gold); }
.dqc-sub { font-size: 10px; color: var(--text-muted); font-style: italic; }
.dqc-list { display: flex; flex-direction: column; gap: 8px; }
.dqc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.dqc-item.done { border-color: var(--accent); background: rgba(0, 231, 1, 0.05); }
.dqc-item.claimed { opacity: 0.55; }
.dqc-item-left { flex: 1; min-width: 0; }
.dqc-item-label { font-size: 13px; font-weight: 700; color: var(--text-bright); margin-bottom: 6px; }
.dqc-progress { height: 4px; background: var(--bg-card); border-radius: 100px; overflow: hidden; margin-bottom: 4px; }
.dqc-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 100px; transition: width 0.5s ease; }
.dqc-meta { font-size: 11px; color: var(--text-muted); }
.dqc-item-right { flex-shrink: 0; }
.dqc-badge { font-size: 10px; color: var(--text-muted); padding: 4px 10px; border-radius: 100px; background: var(--bg-card); font-weight: 700; letter-spacing: 0.3px; }
.dqc-badge-claimed { color: var(--accent); background: rgba(0, 231, 1, 0.1); border: 1px solid rgba(0, 231, 1, 0.25); }
.btn-sm { padding: 4px 12px; font-size: 11px; }

/* ==================== BANKROLL METER (per-game session P/L) ==================== */
.bankroll-meter {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
}
.bankroll-meter-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.bankroll-meter-label > span:first-child { color: var(--text-muted); font-weight: 700; letter-spacing: 1.5px; font-size: 9.5px; }
.bankroll-meter-value { font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; transition: color 0.25s; color: var(--text-muted); }
.bankroll-meter-value.up   { color: var(--accent); text-shadow: 0 0 8px rgba(0,231,1,0.3); }
.bankroll-meter-value.down { color: var(--red); text-shadow: 0 0 8px rgba(237,66,69,0.3); }
.bankroll-meter-bar {
  position: relative;
  height: 6px;
  background: rgba(0,0,0,0.4);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.bankroll-meter-fill {
  position: absolute;
  top: 0; bottom: 0;
  transition: width 0.4s ease, left 0.4s ease, background 0.25s ease;
}
.bankroll-meter-zero {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--text-muted);
  opacity: 0.35;
}
.bankroll-meter-stats {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
}

/* Roadmap #38 — Theme-specific game-area corner ornaments */
.game-area { position: relative; }
.game-area::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Roadmap #45 — 3D chip-stack hover on bet pill */
.wallet-pill { transform-style: preserve-3d; }
.wallet-pill:hover { transform: rotateX(4deg) rotateY(-3deg); transition: transform 0.2s; }

/* Roadmap #52 — Parallax starfield layers for deep-space themes.
   Scoped to game-area and hash-gated via :has() so only Nova Rush /
   Starfall / Space Artifacts get it. */
.game-area:has(#crash-canvas)::after,
.game-area:has(.limbo-result)::after {
  content: '';
  background:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent 2px),
    radial-gradient(1.5px 1.5px at 30% 45%, #fff, transparent 3px),
    radial-gradient(1px 1px at 55% 15%, #c4b5fd, transparent 2px),
    radial-gradient(2px 2px at 75% 55%, #fff, transparent 3px),
    radial-gradient(1px 1px at 88% 22%, #fef3c7, transparent 2px),
    radial-gradient(1.5px 1.5px at 20% 75%, #fff, transparent 3px),
    radial-gradient(1px 1px at 62% 88%, #a5f3fc, transparent 2px);
  background-size: 200% 200%;
  opacity: 0.7;
  animation: parallaxStars 90s linear infinite;
}
@keyframes parallaxStars {
  from { background-position: 0 0; }
  to   { background-position: 100% 100%; }
}

/* Roadmap #40 — hero parallax: subtle mouse-drift tilt on hero SVG */
.home-hero-discord .home-hero-icon { transform-style: preserve-3d; transition: transform 0.2s; }

/* Roadmap #174 — Reduced-motion: respect prefers-reduced-motion by
   disabling non-essential animations. Core interactive cues stay
   (result flashes, button press) but decorative loops are stopped. */
@media (prefers-reduced-motion: reduce) {
  .cover-svg *, .cover-svg,
  .recent-games-track, .daily-quests-card,
  .bankroll-meter-fill, .topup-hero-art,
  .mobile-nav-primary-pill, .idle-hint::before,
  .tilt-pill, .btn-play.idle-hint,
  .shortcuts-hint, .achievement-modal-overlay {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Roadmap #171 — Color-blind-safe mode: add pattern distinction to
   red/green result indicators. Toggled via body.cb-mode added in JS
   from a user-setting. */
body.cb-mode .bankroll-meter-value.up::after { content: ' \u25b2'; font-size: 10px; }
body.cb-mode .bankroll-meter-value.down::after { content: ' \u25bc'; font-size: 10px; }
body.cb-mode .br-dot.br-w { background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 2px, #fff 2px, #fff 3px); }
body.cb-mode .br-dot.br-l { background: repeating-linear-gradient(45deg, var(--red), var(--red) 2px, #fff 2px, #fff 3px); }

/* Roadmap #80 — Level pill in topbar user area */
.user-pill { display: flex; align-items: center; gap: 8px; }
.user-pill-level {
  display: inline-block;
  padding: 2px 7px;
  background: linear-gradient(135deg, var(--gold), #f59e0b);
  color: #0a0a10;
  border-radius: 100px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.35);
}
.user-pill-name { font-weight: 700; }
@media (max-width: 700px) { .user-pill-name { display: none; } }

/* Roadmap #29 — keyboard shortcut hint overlay */
.shortcuts-hint {
  position: fixed;
  bottom: 70px;
  right: 16px;
  z-index: 9500;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  font-size: 12px;
  color: var(--text);
  max-width: 220px;
  animation: bounceIn 0.3s ease;
}
.shortcuts-hint b { color: var(--text-bright); display: block; margin-bottom: 6px; font-size: 13px; }
.shortcuts-hint div { display: flex; justify-content: space-between; margin: 4px 0; color: var(--text-secondary); }
.shortcuts-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-bright);
}

/* Roadmap #23 — Tilt meter pill (persistent after 5+ losses) */
.tilt-pill {
  position: fixed;
  top: 74px;
  right: 12px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #fda4af;
  font-size: 11px;
  font-weight: 800;
  border-radius: 100px;
  backdrop-filter: blur(8px);
  animation: tiltPillPulse 2s ease-in-out infinite;
}
.tilt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px rgba(239,68,69,0.8); }
@keyframes tiltPillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%      { box-shadow: 0 0 10px 2px rgba(239,68,68,0.3); }
}
@media (max-width: 900px) { .tilt-pill { top: 58px; right: 8px; font-size: 10px; } }

/* Roadmap #8 — W/L pattern dots */
.bankroll-meter-pattern {
  display: flex;
  gap: 3px;
  margin-top: 6px;
  height: 6px;
}
.br-dot {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  background: var(--border);
}
.br-dot.br-w { background: var(--accent); box-shadow: 0 0 4px rgba(0,231,1,0.35); }
.br-dot.br-l { background: var(--red); }

/* Roadmap #17 — pre-bet idle ripple on .btn-play if untouched for 6s */
.btn-play { position: relative; }
.btn-play.idle-hint::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: btnIdleRipple 1.6s ease-out;
}
@keyframes btnIdleRipple {
  0%   { opacity: 0.75; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.15); }
}

/* Roadmap #12 — coin tumble class (optional visual hint) */
.coin-tumble { animation: coinTumbleAnim 0.9s ease-out; color: var(--accent) !important; }
@keyframes coinTumbleAnim {
  0%   { text-shadow: 0 0 24px var(--accent-glow); transform: scale(1.08); }
  100% { text-shadow: 0 0 0 transparent; transform: scale(1); }
}

/* Roadmap #10 — bet-amount breathing glow when at max */
.form-input.max-bet-glow { animation: betMaxPulse 1.6s ease-in-out infinite; }
@keyframes betMaxPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.0); }
  50%      { box-shadow: 0 0 12px 2px rgba(251,191,36,0.45); }
}

/* Roadmap #9 — slow-mo reveal freeze + zoom on 20x+ wins */
.slowmo-reveal { animation: slowmoReveal 0.55s cubic-bezier(0.22, 1.1, 0.36, 1); }
@keyframes slowmoReveal {
  0%   { transform: scale(0.85); filter: brightness(1.5) blur(4px); }
  45%  { transform: scale(1.08); filter: brightness(1.2) blur(0); }
  100% { transform: scale(1);    filter: brightness(1)   blur(0); }
}

/* ==================== TOP UP DEDICATED PAGE ==================== */
.topup-page { animation: pageIn 0.3s ease; }
.topup-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 28px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(139, 92, 246, 0.1) 55%, rgba(0, 0, 0, 0.4) 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.topup-hero-left { flex: 1; min-width: 0; }
.topup-hero-art  { flex-shrink: 0; animation: topupCoinSpin 8s linear infinite; transform-origin: center; }
@keyframes topupCoinSpin {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(4deg) scale(1.04); }
}
.topup-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 4px;
  margin-bottom: 6px;
}
.topup-title { font-size: 28px; font-weight: 900; color: var(--text-bright); margin: 0 0 8px; line-height: 1.1; }
.topup-sub   { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 14px; }
.topup-balance-row { display: flex; gap: 8px; flex-wrap: wrap; }
.topup-bal-pill {
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 700;
}
.topup-bal-pill b { color: var(--text-bright); }

.topup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.topup-pack {
  position: relative;
  padding: 20px 14px 16px;
  background: linear-gradient(155deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.8) 100%);
  border: 2px solid var(--pack-accent, var(--border));
  border-radius: 14px;
  color: var(--text-bright);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.topup-pack:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 30px var(--pack-accent);
  filter: brightness(1.08);
}
.topup-pack-badge {
  position: absolute;
  top: -8px;
  right: 10px;
  padding: 3px 10px;
  background: var(--pack-accent);
  color: #0a0a10;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 100px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.topup-pack-name  { font-size: 14px; font-weight: 800; color: var(--pack-accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.topup-pack-cr    { font-size: 26px; font-weight: 900; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.topup-pack-bonus { font-size: 11px; color: var(--gold); font-weight: 700; margin-top: 2px; }
.topup-pack-price {
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--pack-accent);
  color: #0a0a10;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 900;
  display: inline-block;
}

.topup-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 22px; }
.topup-alt-card {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.topup-alt-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.topup-alt-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; }
.topup-alt-title { font-weight: 800; color: var(--text-bright); margin-bottom: 4px; }
.topup-alt-sub   { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.topup-responsible {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.topup-responsible a { color: var(--accent); text-decoration: none; }
.topup-responsible a:hover { text-decoration: underline; }

/* Mobile nav — 'Top Up' primary tab. Matches the height + baseline of
   sibling tabs exactly, just colored gold. No floating-above effect. */
.mobile-nav .mobile-nav-primary {
  flex: 1 1 0 !important;
  padding: 0 !important;
  color: #0a0a10 !important;
  position: relative;
  display: flex !important;
  align-items: stretch;
  justify-content: center;
}
.mobile-nav .mobile-nav-primary-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 9px 4px 7px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #0a0a10;
  border-radius: 12px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.35);
  animation: mobileNavPrimaryPulse 2.4s ease-in-out infinite;
  line-height: 1;
  white-space: nowrap;
}
.mobile-nav .mobile-nav-primary-pill .nav-icon { color: #0a0a10; }
.mobile-nav .mobile-nav-primary-pill .nav-icon svg { color: #0a0a10; width: 22px; height: 22px; }
.mobile-nav .mobile-nav-primary.active .mobile-nav-primary-pill { filter: brightness(1.1); }
@keyframes mobileNavPrimaryPulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(251, 191, 36, 0.35); }
  50%      { box-shadow: 0 2px 18px rgba(251, 191, 36, 0.7); }
}
/* Suppress the generic active-dot on primary — pill already signals state */
.mobile-nav .mobile-nav-primary::before { display: none !important; }

/* ==================== COVER ART ANIMATIONS ==================== */
/* Subtle ambient motion on each of the 9 rebuilt Original covers.
   Scoped via .cover-<id> so other bespoke covers stay still. */

/* Velvet Room \u2014 "21" gold emblem gently pulses */
.cover-blackjack .bj-emblem { animation: bjEmblemPulse 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bjEmblemPulse {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* Aztec Drop \u2014 torches flicker in + out of sync */
.cover-plinko .pl-torches { animation: plTorchFlicker 1.4s ease-in-out infinite; }
@keyframes plTorchFlicker {
  0%, 100% { opacity: 0.55; }
  20%      { opacity: 0.9; }
  55%      { opacity: 0.6; }
  75%      { opacity: 0.85; }
}

/* Nova Rush \u2014 rocket gently drifts up-right (SMIL-free) */
.cover-crash g[transform*="rocket"],
.cover-crash text { animation: crHudBlink 2.4s ease-in-out infinite; }
@keyframes crHudBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}

/* Pharaoh's Vault \u2014 floating ankh gently pulses */
.cover-mines .mn-ankh { animation: mnAnkhPulse 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes mnAnkhPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; filter: drop-shadow(0 0 6px rgba(212,175,55,0.8)); }
}

/* Tavern Throw \u2014 gentle candlelight (cover bg glow) */
.cover-dice { animation: dcCandleGlow 3.6s ease-in-out infinite alternate; }
@keyframes dcCandleGlow {
  from { filter: brightness(0.95); }
  to   { filter: brightness(1.05); }
}

/* Pirate's Doubloon \u2014 coin gently bobs, ocean shimmers */
.cover-coinflip g[transform="translate(100 102)"] { animation: cfCoinBob 3.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes cfCoinBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Neon Arcade \u2014 scanlines subtly scroll down */
.cover-slots .ns-scanlines { animation: nsScanScroll 1.8s linear infinite; }
@keyframes nsScanScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(10px); }
}

/* Starfall — comet head twinkles + constellation stars pulse */
.cover-limbo g[transform="translate(166 66)"] { animation: sfCometPulse 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sfCometPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* Book of Kings — gold flecks twinkle + book gentle sway */
.cover-slot-egypt .se-flecks { animation: seFleckTwinkle 2.4s ease-in-out infinite; }
.cover-slot-egypt .se-book { animation: seBookSway 4.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes seFleckTwinkle {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
@keyframes seBookSway {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-2px) rotate(-1deg); }
}

/* Zeus Rising — bolt flashes bright every few seconds */
.cover-slot-zeus .sz-bolt { animation: szBoltFlash 2.8s ease-in-out infinite; }
@keyframes szBoltFlash {
  0%, 100%  { opacity: 0.85; filter: drop-shadow(0 0 6px #fbbf24); }
  8%        { opacity: 1;    filter: drop-shadow(0 0 24px #fef3c7); }
  20%       { opacity: 0.9;  filter: drop-shadow(0 0 10px #fbbf24); }
}

/* Fruit 777 — bulb marquee chases, payline blinks */
.cover-slot-fruit .sf-bulbs circle:nth-child(1) { animation: sfBulb 0.9s ease-in-out infinite; }
.cover-slot-fruit .sf-bulbs circle:nth-child(2) { animation: sfBulb 0.9s ease-in-out 0.15s infinite; }
.cover-slot-fruit .sf-bulbs circle:nth-child(3) { animation: sfBulb 0.9s ease-in-out 0.30s infinite; }
.cover-slot-fruit .sf-bulbs circle:nth-child(4) { animation: sfBulb 0.9s ease-in-out 0.45s infinite; }
.cover-slot-fruit .sf-bulbs circle:nth-child(5) { animation: sfBulb 0.9s ease-in-out 0.60s infinite; }
.cover-slot-fruit .sf-bulbs circle:nth-child(6) { animation: sfBulb 0.9s ease-in-out 0.75s infinite; }
.cover-slot-fruit .sf-payline { animation: sfPayline 1.4s ease-in-out infinite; }
@keyframes sfBulb {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes sfPayline {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Lost Isle (treasure) — palm sway + chest subtle shake + map flutter */
.cover-treasure .tr-palm { animation: trPalmSway 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-treasure .tr-chest { animation: trChestRumble 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-treasure .tr-map { animation: trMapFlutter 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes trPalmSway {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(2deg); }
}
@keyframes trChestRumble {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-1px) rotate(0.5deg); }
  60%      { transform: translateY(0) rotate(-0.5deg); }
}
@keyframes trMapFlutter {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(-6deg) translateY(-1px); }
}

/* Starburst (rocket) — radial burst rotates + rocket shakes + flame flickers */
.cover-rocket .rk-burst { animation: rkBurstSpin 8s linear infinite; transform-origin: center; transform-box: fill-box; }
.cover-rocket .rk-rocket { animation: rkRocketShake 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-rocket .rk-flame { animation: rkFlameFlicker 0.3s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes rkBurstSpin { to { transform: rotate(360deg); } }
@keyframes rkRocketShake {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(-1px) translateY(-1px); }
  50%      { transform: translateX(1px) translateY(0); }
  75%      { transform: translateX(-1px) translateY(1px); }
}
@keyframes rkFlameFlicker {
  from { transform: scaleY(1); }
  to   { transform: scaleY(1.15); }
}

/* Caribbean Night (caribbean) — waves shimmer */
.cover-caribbean { animation: cbSunsetShimmer 5s ease-in-out infinite alternate; }
@keyframes cbSunsetShimmer {
  from { filter: brightness(1); }
  to   { filter: brightness(1.06); }
}

/* Demolition (minefield) — hero bomb fuse sparks */
.cover-minefield > svg > g[transform="translate(100 180)"] { animation: mfBombShake 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes mfBombShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px) rotate(-2deg); }
  75%      { transform: translateX(2px) rotate(2deg); }
}

/* Showdown (rps) — rock + paper subtly clench/relax */
.cover-rps .rp-rock { animation: rpRockNudge 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-rps .rp-paper { animation: rpPaperNudge 2.2s ease-in-out 0.3s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes rpRockNudge {
  0%, 100% { transform: scale(1) translateX(0); }
  50%      { transform: scale(1.06) translateX(3px); }
}
@keyframes rpPaperNudge {
  0%, 100% { transform: scale(1) translateX(0); }
  50%      { transform: scale(1.06) translateX(-3px); }
}

/* Helium Rush (balloon) — hero balloon floats + small balloons drift */
.cover-balloon .bl-balloon { animation: blBalloonBob 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-balloon .bl-drift { animation: blDrift 4.5s ease-in-out infinite alternate; }
@keyframes blBalloonBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(2deg); }
}
@keyframes blDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* Carnival Spin (megawheel) — wheel spins + bulbs chase */
.cover-megawheel .mwh-wheel { animation: mwhSpin 20s linear infinite; transform-origin: center; transform-box: fill-box; }
.cover-megawheel .mwh-bulbs { animation: mwhBulbs 1.6s ease-in-out infinite; }
@keyframes mwhSpin { to { transform: rotate(360deg); } }
@keyframes mwhBulbs {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; filter: drop-shadow(0 0 4px #fef3c7); }
}

/* Skyclimb (stairway) — climber bobs up + sparkles twinkle */
.cover-stairway .sw-climber { animation: swClimberBob 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-stairway .sw-sparkles { animation: swSparkleTwinkle 1.5s ease-in-out infinite; }
@keyframes swClimberBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes swSparkleTwinkle {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.2); }
}

/* Skypilot (aviator) — plane gently wobbles as if flying */
.cover-aviator .av-plane { animation: avPlaneWobble 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes avPlaneWobble {
  0%, 100% { transform: rotate(-28deg) translateY(0); }
  50%      { transform: rotate(-30deg) translateY(-2px); }
}

/* Royal Draw (videopoker) — HOLD tags blink */
.cover-videopoker .vp-holds { animation: vpHoldsBlink 1.3s ease-in-out infinite; }
@keyframes vpHoldsBlink {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Cascade Mine (megaways) — multiplier bubble pulses */
.cover-megaways .mw-mult { animation: mwMultPulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes mwMultPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.06); filter: brightness(1.12); }
}

/* Jade Duel (dragontiger) — dragon + tiger breathe */
.cover-dragontiger .dt-dragon { animation: dtDragonBreathe 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-dragontiger .dt-tiger { animation: dtTigerBreathe 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-dragontiger .dt-card-drag { animation: dtCardFloat 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-dragontiger .dt-card-tiger { animation: dtCardFloat 2.5s ease-in-out 0.5s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes dtDragonBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes dtTigerBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes dtCardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Lotus Dice (sicbo) — dice subtly tumble */
.cover-sicbo .sb-dice g:nth-child(1) { animation: sbDiceTumble 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-sicbo .sb-dice g:nth-child(2) { animation: sbDiceTumble 3s ease-in-out 0.5s infinite; transform-origin: center; transform-box: fill-box; }
.cover-sicbo .sb-dice g:nth-child(3) { animation: sbDiceTumble 3s ease-in-out 1s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sbDiceTumble {
  0%, 100% { transform: rotate(0) translateY(0); }
  50%      { transform: rotate(6deg) translateY(-2px); }
}

/* Shootout (penalty) — ball subtly floats + crowd sparkles */
.cover-penalty .pk-ball { animation: pkBallHover 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-penalty .pk-crowd { animation: pkCrowdTwinkle 1.4s ease-in-out infinite; }
@keyframes pkBallHover {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-3px) rotate(6deg); }
}
@keyframes pkCrowdTwinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Crown Climb (hilo) — arrow arcs pulse + next-card hints */
.cover-hilo .hl-arrows { animation: hlArrows 2.4s ease-in-out infinite; }
.cover-hilo .hl-next-card { animation: hlNextCard 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes hlArrows {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
@keyframes hlNextCard {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50%      { transform: rotate(10deg) translateY(-2px); }
}

/* Starboard (keno) — hero ball bobs + small balls orbit */
.cover-keno .kn-ball { animation: knBallBob 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-keno .kn-balls-small { animation: knSmallPulse 3.2s ease-in-out infinite alternate; }
@keyframes knBallBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.03); }
}
@keyframes knSmallPulse {
  from { opacity: 0.85; }
  to   { opacity: 1; filter: brightness(1.1); }
}

/* Fortress (tower) — flag waves + steps cascade pulse */
.cover-tower .tw-flag { animation: twFlagWave 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-tower .tw-steps rect:nth-child(1) { animation: twStep 2s ease-in-out infinite; }
.cover-tower .tw-steps rect:nth-child(2) { animation: twStep 2s ease-in-out 0.15s infinite; }
.cover-tower .tw-steps rect:nth-child(3) { animation: twStep 2s ease-in-out 0.30s infinite; }
.cover-tower .tw-steps rect:nth-child(4) { animation: twStep 2s ease-in-out 0.45s infinite; }
.cover-tower .tw-steps rect:nth-child(5) { animation: twStep 2s ease-in-out 0.60s infinite; }
.cover-tower .tw-steps rect:nth-child(6) { animation: twStep 2s ease-in-out 0.75s infinite; }
@keyframes twFlagWave {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.85); }
}
@keyframes twStep {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Bazaar Wheel (wheel) — wheel spins */
.cover-wheel .wh-wheel { animation: whSpin 18s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes whSpin { to { transform: rotate(360deg); } }

/* Midnight Salon (baccarat) — chandelier glows + chips subtly shift */
.cover-baccarat .bc-chand circle { animation: bcCandleFlicker 1.5s ease-in-out infinite alternate; }
.cover-baccarat .bc-chand circle:nth-child(3) { animation-delay: 0.4s; }
.cover-baccarat .bc-chand circle:nth-child(4) { animation-delay: 0.8s; }
.cover-baccarat .bc-chand circle:nth-child(5) { animation-delay: 0.2s; }
@keyframes bcCandleFlicker {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* Lucky Tickets (main scratch) — coins pulse + foil subtly shifts */
.cover-scratch .sc-coin { animation: scCoinBob 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-scratch .sc-coin2 { animation: scCoinBob 2.6s ease-in-out 0.6s infinite; transform-origin: center; transform-box: fill-box; }
.cover-scratch .sc-foil { animation: scFoilShift 4s ease-in-out infinite; }
@keyframes scCoinBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-3px) rotate(4deg); }
}
@keyframes scFoilShift {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08); }
}

/* Gold Rush (scratch-gold-miner) — nugget glints + flecks float up */
.cover-scratch-gold-miner .sg-nugget { animation: sgNuggetShine 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-scratch-gold-miner .sg-flecks { animation: sgFleckFloat 3.5s ease-in-out infinite alternate; }
@keyframes sgNuggetShine {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18) drop-shadow(0 0 12px #fbbf24); }
}
@keyframes sgFleckFloat {
  from { transform: translateY(0); opacity: 0.6; }
  to   { transform: translateY(-4px); opacity: 1; }
}

/* Jackpot (scratch-jackpot) — sparkles twinkle + hero text glows */
.cover-scratch-jackpot .sj-sparkles { animation: sjSparkle 1.4s ease-in-out infinite; }
.cover-scratch-jackpot .sj-hero { animation: sjHeroGlow 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sjSparkle {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@keyframes sjHeroGlow {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50%      { filter: brightness(1.15) drop-shadow(0 0 10px #fbbf24); transform: scale(1.02); }
}

/* Hoard (main crate) — rays rotate + lid gently lifts + coins pulse */
.cover-crate .ct-rays { animation: ctRaysSpin 12s linear infinite; transform-origin: center; transform-box: fill-box; }
.cover-crate .ct-lid { animation: ctLidLift 3.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cover-crate .ct-coins { animation: ctCoinsPulse 2.2s ease-in-out infinite; }
@keyframes ctRaysSpin { to { transform: rotate(360deg); } }
@keyframes ctLidLift {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-1deg); }
}
@keyframes ctCoinsPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.15) drop-shadow(0 0 6px #fbbf24); }
}

/* Classic Armory — rifle subtly shifts to simulate readiness */
.cover-crate-armory .cra-rifle { animation: craRifleNudge 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes craRifleNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-2px) rotate(-1deg); }
}

/* Space Artifacts — planet rings subtly rotate + satellite orbits */
.cover-crate-space .csp-planet { animation: cspPlanetSpin 28s linear infinite; transform-origin: center; transform-box: fill-box; }
.cover-crate-space .csp-sat { animation: cspSatDrift 6s ease-in-out infinite alternate; }
@keyframes cspPlanetSpin {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(2deg) scale(1.02); }
}
@keyframes cspSatDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(6px, -4px); }
}

/* Disco Deluxe — mirror ball rotates + sparkles twinkle */
.cover-crate-disco .cd-ball { animation: cdBallSpin 20s linear infinite; transform-origin: center; transform-box: fill-box; }
.cover-crate-disco .cd-sparkles { animation: cdSparkleTwinkle 1.5s ease-in-out infinite; }
@keyframes cdBallSpin {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(180deg) scale(1.02); }
}
@keyframes cdSparkleTwinkle {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.3); }
}

/* Sugar Rush — cluster candies shimmer + hero heart beats */
.cover-slot-sugar .su-cluster { animation: suClusterShimmer 3s ease-in-out infinite; }
.cover-slot-sugar .su-hero { animation: suHeartBeat 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes suClusterShimmer {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; filter: brightness(1.08); }
}
@keyframes suHeartBeat {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.12); }
  60%      { transform: scale(1.02); }
}

/* Profit sparkline card on home — compact stat card with inline chart.
   Fills its grid column; chart flexes to remaining width. */
.profit-sparkline-card-placeholder { display: none; }
.profit-sparkline-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 100%;
  justify-content: center;
}
.psc-left { min-width: 0; }
.psc-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
.psc-value { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 3px 0 1px; }
.psc-sub   { font-size: 11px; color: var(--text-muted); }
.psc-sub b { color: var(--text-bright); font-weight: 800; }
.psc-right { width: 100%; min-width: 0; margin-top: 4px; }
.psc-svg { width: 100%; height: 40px; display: block; }

/* Recent games carousel on home */
.recent-games-row { margin: 16px 0 4px; }
.recent-games-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--text-bright);
  margin-bottom: 10px; letter-spacing: 0.3px;
}
.recent-games-title svg { color: var(--accent); }
.recent-games-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  scroll-snap-type: x proximity;
}
.recent-games-track::-webkit-scrollbar { height: 6px; }
.recent-games-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.recent-game-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-bright);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  scroll-snap-align: start;
  min-width: 160px;
}
.recent-game-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 231, 1, 0.12);
}
.recent-game-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: rgba(0, 231, 1, 0.08);
  border-radius: 8px;
  flex-shrink: 0;
}
.recent-game-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recent-game-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-game-time { font-size: 10px; color: var(--text-muted); }

/* Onboarding coach-mark overlay */
.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: auto;
  animation: onboardFade 0.3s ease;
}
.onboard-overlay.closing { animation: onboardFadeOut 0.22s ease forwards; }
@keyframes onboardFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboardFadeOut { from { opacity: 1; } to { opacity: 0; } }
.onboard-spotlight {
  position: fixed;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 28px 6px rgba(0, 231, 1, 0.55);
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s, height 0.3s;
  z-index: 1;
}
.onboard-card {
  position: fixed;
  width: 280px;
  padding: 16px 18px 14px;
  background: var(--bg-card);
  border: 1px solid rgba(0, 231, 1, 0.4);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 231, 1, 0.2);
  color: var(--text-bright);
  z-index: 2;
  animation: onboardCardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transition: top 0.3s, left 0.3s;
}
@keyframes onboardCardIn { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.onboard-skip {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
}
.onboard-skip:hover { color: var(--text-bright); background: rgba(255, 255, 255, 0.06); }
.onboard-title { font-size: 15px; font-weight: 800; color: var(--accent); margin-bottom: 4px; padding-right: 16px; }
.onboard-body  { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.onboard-foot  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.onboard-dots  { display: flex; gap: 6px; }
.onboard-dot   { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: background 0.2s; }
.onboard-dot.active { background: var(--accent); }
.onboard-next  { font-size: 12px; padding: 6px 16px; }

/* Transient shimmer overlay shown during game page open to hint "loading" */
.game-page.fresh-open::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 65%,
    rgba(255,255,255,0) 100%);
  background-size: 220% 100%;
  animation: skeletonShimmer 0.55s linear forwards;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.game-page.fresh-open-end::before { opacity: 0; }
.game-page { position: relative; }

@media (max-width: 900px) {
  .game-controls {
    position: sticky !important;
    bottom: 0;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 10;
  }
}

#toast-stack { position: fixed; top: 72px; right: 16px; z-index: 9500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: calc(100vw - 32px); }
@media (max-width: 900px) { #toast-stack { top: auto; bottom: 66px; left: 50%; right: auto; transform: translateX(-50%); align-items: center; } }
.toast-stack-item { background: #3b82f6e6; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 18px rgba(0,0,0,0.4); animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1); pointer-events: auto; cursor: pointer; min-width: 200px; max-width: 380px; backdrop-filter: blur(8px); }

.game-card:nth-child(1) { animation-delay: 0.00s; }
.game-card:nth-child(2) { animation-delay: 0.04s; }
.game-card:nth-child(3) { animation-delay: 0.08s; }
.game-card:nth-child(4) { animation-delay: 0.12s; }
.game-card:nth-child(5) { animation-delay: 0.16s; }
.game-card:nth-child(6) { animation-delay: 0.20s; }
.game-card:nth-child(7) { animation-delay: 0.24s; }
.game-card:nth-child(8) { animation-delay: 0.28s; }
.game-card:nth-child(9) { animation-delay: 0.32s; }
.game-card:nth-child(10) { animation-delay: 0.36s; }
.game-card:nth-child(11) { animation-delay: 0.40s; }
.game-card:nth-child(12) { animation-delay: 0.44s; }
.game-card:nth-child(13) { animation-delay: 0.48s; }
.game-card:nth-child(14) { animation-delay: 0.52s; }
.game-card:nth-child(15) { animation-delay: 0.56s; }
.game-card:nth-child(16) { animation-delay: 0.60s; }
.game-card:nth-child(17) { animation-delay: 0.64s; }
.game-card:nth-child(18) { animation-delay: 0.68s; }
.game-card:nth-child(19) { animation-delay: 0.72s; }
.game-card:nth-child(20) { animation-delay: 0.76s; }
.game-card:nth-child(21) { animation-delay: 0.80s; }

.hot-streak-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  background:
    radial-gradient(ellipse at top, rgba(251,191,36,0.22) 0%, transparent 45%),
    radial-gradient(ellipse at bottom, rgba(239,68,68,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at left, rgba(251,146,60,0.12) 0%, transparent 40%),
    radial-gradient(ellipse at right, rgba(251,146,60,0.12) 0%, transparent 40%);
  animation: hotStreakFlicker 1.1s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s;
}
.hot-streak-ambient.on { opacity: 1; }

.emoji-burst-particle {
  position: fixed;
  font-size: 28px;
  pointer-events: none;
  z-index: 9998;
  user-select: none;
  will-change: transform, opacity;
  animation: emojiFloat 1.4s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

.coin-rain-piece {
  position: fixed;
  top: -60px;
  font-size: 28px;
  pointer-events: none;
  z-index: 10001;
  will-change: transform, opacity;
  animation: coinRain 2.2s cubic-bezier(0.4, 0, 0.8, 1) forwards;
}

.near-miss-flash { animation: nearMissFlash 0.9s ease-in-out 1; }
@keyframes scratchReveal { 0% { transform: scale(0.3) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.15) rotate(5deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes crateShake { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-6px); } 20%,40%,60%,80% { transform: translateX(6px); } }
@keyframes crateRevealPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
.keno-cell:hover { transform: scale(1.05); filter: brightness(1.2); }
.tower-cell:not(:disabled):hover { transform: scale(1.05); filter: brightness(1.2); }
.tower-cell-flip { animation: towerCellFlip 0.45s cubic-bezier(0.4, 0.2, 0.2, 1) both; }
@keyframes towerCellFlip {
  0%   { transform: rotateX(-180deg) scale(0.7); filter: brightness(0.6); }
  60%  { transform: rotateX(0) scale(1.12); filter: brightness(1.15); }
  100% { transform: rotateX(0) scale(1); filter: brightness(1); }
}
.tower-cell-bust {
  animation: towerCellBust 0.6s cubic-bezier(0.4, 0.2, 0.2, 1) both;
  box-shadow: 0 0 32px rgba(237, 66, 69, 0.8) !important;
}
@keyframes towerCellBust {
  0%   { transform: rotateX(-180deg) scale(0.7); }
  45%  { transform: rotateX(0) scale(1.15); filter: brightness(0.5); }
  60%  { transform: translateX(-4px); }
  75%  { transform: translateX(4px); }
  90%  { transform: translateX(-2px); }
  100% { transform: translateX(0) scale(1); }
}
.tower-cell-bomb-reveal {
  animation: towerBombReveal 0.4s cubic-bezier(0.4, 0.2, 0.2, 1) both;
  box-shadow: 0 0 18px rgba(237, 66, 69, 0.55) !important;
}
@keyframes towerBombReveal {
  0%   { transform: rotateX(-90deg) scale(0.8); opacity: 0.4; }
  60%  { transform: rotateX(0) scale(1.08); opacity: 1; }
  100% { transform: rotateX(0) scale(1); opacity: 1; }
}
/* ==================== CRATE GAME ==================== */
.crate-track { width: 100%; overflow: hidden; position: relative; }
.crate-pointer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: var(--accent);
  z-index: 5;
  box-shadow: 0 0 12px var(--accent-glow);
}
.crate-pointer::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--accent);
}

/* ==================== VERSION BAR ==================== */
.version-bar {
  display: none;
  padding: 4px 16px;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 901px) { .version-bar { display: flex; } }
.health-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.health-dot.ok { background: var(--accent); }
.health-dot.warn { background: var(--gold); }
.health-dot.down { background: var(--red); }

.waiting { animation: pulse 1.5s infinite; }
.hot-streak { animation: hotStreak 1s infinite; }
.shimmer { background: linear-gradient(90deg, transparent 30%, var(--glass) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 2s infinite; }

/* ==================== MOBILE BOTTOM NAV ==================== */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(14,14,20,0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  z-index: 200;
  padding: 4px 0;
  padding-bottom: env(safe-area-inset-bottom, 4px);
}
.mobile-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mobile-nav a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 9.5px;
  font-weight: 600;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-nav a .nav-icon { display: flex; align-items: center; justify-content: center; }
.mobile-nav a .nav-icon svg { width: 22px; height: 22px; }
.mobile-nav a.active { color: var(--accent); }
.mobile-nav a:active { transform: scale(0.9); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .live-bets-bar { padding: 4px 10px; font-size: 10px; position: fixed; bottom: 52px; left: 0; right: 0; z-index: 199; background: rgba(14,14,20,0.9); backdrop-filter: blur(8px); }
  .live-bets-label { font-size: 9px; }
  .content { padding-bottom: 100px; }
  .mobile-nav { display: block; }
  .content { padding: 12px; padding-bottom: 70px; }
  /* Push entire app below iPhone status bar/notch */
  body, #app {
    padding-top: env(safe-area-inset-top, 0);
    background: var(--bg-base);
  }
  .topbar {
    padding: 0 8px;
    height: 44px;
    position: sticky;
    top: env(safe-area-inset-top, 0);
  }
  .topbar-left { flex-shrink: 0; }
  .topbar-right { gap: 6px; }
  .logo { font-size: 16px; letter-spacing: 1px; }
  body { font-size: 13px; }
  .content { padding: 10px; padding-bottom: 70px; }
  #toast-stack { bottom: calc(66px + env(safe-area-inset-bottom, 0)); }

  .game-page {
    flex-direction: column-reverse;
    min-height: auto;
    border-radius: var(--radius-sm);
  }
  .game-controls {
    width: 100%;
    border-right: none;
    border-top: 1px solid var(--border);
    padding: 12px;
    gap: 10px;
  }
  .game-area { min-height: 200px; max-height: 50vh; }

  .home-hero { padding: 20px 16px; margin-bottom: 16px; }
  .home-hero h1 { font-size: 22px; }
  .game-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .game-card-img { aspect-ratio: 1 / 1; }

  .btn { padding: 10px 16px; font-size: 13px; min-height: 44px; }
  .btn-play { padding: 14px; min-height: 48px; font-size: 15px; }
  .choice-btn { padding: 10px; min-height: 44px; font-size: 13px; }
  .form-input { padding: 10px 12px; min-height: 44px; font-size: 15px; }
  .btn-mult { min-height: 44px; min-width: 40px; }

  .playing-card { width: 56px; height: 78px; }
  .playing-card div:first-child { font-size: 16px !important; }
  .hand-value { font-size: 18px; }
  .bj-table { padding: 12px; gap: 10px; }

  .mines-grid { width: 100%; max-width: 340px; gap: 5px; }
  .mine-tile { min-height: 50px; font-size: 18px; }

  .slots-display { gap: 8px; }
  .slot-reel { width: 80px; height: 90px; font-size: 36px; }

  .wallet-pill { height: 30px; max-width: none; overflow: hidden; }
  .wallet-bal { padding: 0 6px; font-size: 10px; white-space: nowrap; }
  .wallet-deposit { padding: 0 8px; font-size: 10px; white-space: nowrap; }
  .wallet-toggle { font-size: 9px !important; padding: 0 4px !important; white-space: nowrap; }
  .user-pill { display: none; }
  .topbar .btn-ghost { display: none; }
  .topbar .btn-sm { padding: 6px 10px; font-size: 11px; min-height: 30px; }

  .info-card { padding: 14px; }
  .section-title { font-size: 16px; }

  .result-banner { padding: 10px 16px; }
  .rb-mult { font-size: 22px; }
  .rb-amt { font-size: 15px; }
}

@media (max-width: 380px) {
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .playing-card { width: 48px; height: 68px; }
  .mine-tile { min-height: 44px; font-size: 16px; }
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==================== PROFILE PAGE ==================== */
.profile-hero {
  animation: fadeInScale 0.35s cubic-bezier(0.16, 1.2, 0.3, 1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.profile-hero:hover { box-shadow: 0 10px 36px rgba(0,0,0,0.4); }
.profile-banner {
  background-size: 200% 200% !important;
  animation: gradientShift 10s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.profile-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}
.profile-avatar {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  user-select: none;
}
.profile-avatar[onclick]:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 4px var(--accent-bg); }
.profile-avatar img { display: block; }
.profile-name {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.profile-name[onclick]:hover { color: var(--accent) !important; text-shadow: 0 0 18px var(--accent-glow); }

.profile-stats-grid .profile-stat {
  opacity: 0;
  animation: fadeInUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.profile-stats-grid .profile-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, var(--accent-bg), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.profile-stats-grid .profile-stat:hover {
  transform: translateY(-3px);
  border-color: var(--accent-glow);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.profile-stats-grid .profile-stat:hover::before { opacity: 1; }
.profile-stats-grid .profile-stat .stat-value {
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
  display: inline-block;
}
.profile-stats-grid .profile-stat:hover .stat-value { transform: scale(1.06); }
.profile-stats-grid .profile-stat:nth-child(1) { animation-delay: 0.00s; }
.profile-stats-grid .profile-stat:nth-child(2) { animation-delay: 0.05s; }
.profile-stats-grid .profile-stat:nth-child(3) { animation-delay: 0.10s; }
.profile-stats-grid .profile-stat:nth-child(4) { animation-delay: 0.15s; }
.profile-stats-grid .profile-stat:nth-child(5) { animation-delay: 0.20s; }
.profile-stats-grid .profile-stat:nth-child(6) { animation-delay: 0.25s; }

/* ==================== POLISH PACK — ANIMATIONS ==================== */

/* New keyframes */
@keyframes slideInLeft     { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: none } }
@keyframes fadeInUp        { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes gradientShift   { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
@keyframes softBreathe     { 0%,100% { transform: scale(1) } 50% { transform: scale(1.04) } }
@keyframes btnPulse        { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow) } 50% { box-shadow: 0 0 0 8px transparent } }
@keyframes iconWiggle      { 0%,100% { transform: rotate(0) } 20% { transform: rotate(-6deg) } 60% { transform: rotate(4deg) } }
@keyframes sheenSweep      { 0% { transform: translateX(-100%) skewX(-20deg) } 100% { transform: translateX(250%) skewX(-20deg) } }
@keyframes borderTrail     { 0% { background-position: 0% 50% } 100% { background-position: 200% 50% } }
@keyframes accentGlowPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow) } 50% { box-shadow: 0 0 16px 2px var(--accent-glow) } }
@keyframes countUpBounce   { 0% { transform: scale(1.3); color: var(--accent) } 100% { transform: scale(1); color: inherit } }
@keyframes fadeInScale     { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: scale(1) } }

/* Sidebar link — slide accent bar in on hover */
.sidebar-link {
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.sidebar-link::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sidebar-link:hover { color: var(--text-bright); padding-left: 12px; }
.sidebar-link:hover::before { transform: scaleY(1); }
.sidebar-link.active::before { transform: scaleY(1); }

/* Game-card sheen sweep on hover */
.game-card {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s ease, border-color 0.22s ease;
}
.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%) skewX(-20deg);
  pointer-events: none;
  z-index: 2;
  transition: transform 0s;
}
.game-card:hover::before { animation: sheenSweep 0.9s cubic-bezier(0.3, 0, 0.3, 1); }
.game-card-img > * { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.game-card:hover .game-card-img > svg:last-child { transform: scale(1.04); }

/* Button ripple + soft glow pulse on primary CTAs */
.btn-primary, .btn-play {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after, .btn-play::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,0.35) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  z-index: 0;
}
.btn-primary:hover::after, .btn-play:hover::after { opacity: 1; }
.btn-play:not(:disabled) { animation: btnPulse 2.6s ease-in-out infinite; }

/* Choice-btn active — gentle breathe */
.choice-btn.active { animation: softBreathe 2.2s ease-in-out infinite; }

/* Form input focus — accent ring expand */
.form-input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  outline: none;
}

/* Balance / number counter bounce on change (apply .count-up via JS) */
.count-up { animation: countUpBounce 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Stat-card / info-card entrance stagger on page load */
.content > .info-card,
.content > .game-grid {
  animation: fadeInUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.content > .info-card:nth-child(2) { animation-delay: 0.04s }
.content > .info-card:nth-child(3) { animation-delay: 0.08s }
.content > .info-card:nth-child(4) { animation-delay: 0.12s }
.content > .info-card:nth-child(5) { animation-delay: 0.16s }
.content > .info-card:nth-child(6) { animation-delay: 0.20s }

/* Topbar entrance */
.topbar { animation: slideInLeft 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Mobile-nav active icon wiggle */
.mobile-nav a.active .nav-icon svg,
.mobile-nav a.active .nav-icon { animation: iconWiggle 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Chat FAB — gentle accent glow */
.chat-fab { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.chat-fab:hover { transform: scale(1.08); }

/* Sidebar Discord button — subtle glow breathe */
.sidebar-discord { animation: accentGlowPulse 3.4s ease-in-out infinite; }

/* Game card badge — micro bounce on render */
.game-card-badge { animation: fadeInScale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Multi-direction gradient shift for VIP / tournament card */
.info-card[style*="gold"],
.info-card[style*="var(--gold)"] {
  background-size: 200% 200%;
  animation: gradientShift 6s ease-in-out infinite;
}

/* ==================== MOBILE PERFORMANCE ==================== */
@media (hover: none) and (pointer: coarse) {
  /* Touch devices: disable hover-only sheen (saves paint) */
  .game-card:hover::before { animation: none; }
  .game-card::before { display: none; }
  /* No btnPulse infinite animation on mobile — saves battery */
  .btn-play:not(:disabled) { animation: none; }
  /* Softer game-card lift — translateY is cheaper than scale+shadow */
  .game-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* Remove gray tap flash on iOS Safari */
a, button, [role="button"], .sidebar-link, .game-card, .mobile-nav a, .choice-btn {
  -webkit-tap-highlight-color: transparent;
}

/* Allow pinch-zoom but stop double-tap-zoom (massively reduces tap latency on iOS) */
html, body { touch-action: manipulation; }

/* Roadmap #65: shimmer sweep on the progressive-jackpot ticker */
@keyframes jpShine { 0% { left: -30%; } 100% { left: 130%; } }
/* Roadmap #69: pulsing dot next to "N online" pill in topbar */
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.35); } }

/* Blackjack pro-grade polish: idle cards float, winning hands glow,
 * losing hands desaturate, BLACKJACK outcome gets a gold flash. */
@keyframes bjIdleFloat { 0%, 100% { transform: var(--idle-t) translateY(0); } 50% { transform: var(--idle-t) translateY(-6px); } }
.bj-idle-card { --idle-t: rotate(0deg); animation: bjIdleFloat 4.2s ease-in-out infinite; will-change: transform; }
.bj-idle-card:nth-child(1) { --idle-t: rotate(-14deg) translateX(-42px); animation-delay: 0s; }
.bj-idle-card:nth-child(2) { --idle-t: rotate(-2deg); animation-delay: 0.7s; }
.bj-idle-card:nth-child(3) { --idle-t: rotate(14deg) translateX(42px); animation-delay: 1.4s; }

@keyframes bjWinGlow { 0%, 100% { box-shadow: 0 0 0 rgba(0,231,1,0); } 50% { box-shadow: 0 0 24px rgba(0,231,1,0.65), 0 0 48px rgba(0,231,1,0.28); } }
.card-hand.win .playing-card { animation: bjWinGlow 1.3s ease-in-out 2; border-color: rgba(0,231,1,0.6) !important; }
.card-hand.lose .playing-card { filter: grayscale(0.5) brightness(0.7); transition: filter 0.45s; }
.card-hand.push .playing-card { filter: saturate(0.55) brightness(0.85); }

@keyframes bjBJFlash { 0% { transform: scale(0.85); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 50% { transform: scale(1); } 100% { transform: scale(1); opacity: 1; } }
.bj-outcome.blackjack { animation: bjBJFlash 0.55s cubic-bezier(0.22, 1.2, 0.36, 1); text-shadow: 0 0 22px rgba(251,191,36,0.75), 0 0 44px rgba(251,191,36,0.4); }
/* Favorite star + vault icon appear on card hover, stay visible when active */
.game-card:hover .fav-star-idle,
.game-card:hover .vault-toggle-idle { opacity: 1 !important; }
@media (hover: none) {
  .fav-star-idle { opacity: 0.55 !important; }
  .vault-toggle-idle { opacity: 0.55 !important; }
}
.jackpot-ticker { transition: transform 0.15s, box-shadow 0.15s; }
.jackpot-ticker:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(240,185,11,0.22); }

/* Wave 8 #172: Keyboard-only focus rings. :focus-visible only fires
 * when the user reaches an element via keyboard tab (not mouse click),
 * so we get WCAG-compliant visible focus for keyboard users without
 * the ugly blue outline on every mouse click. */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.game-card:focus-visible,
.sidebar-link:focus-visible,
.mobile-nav a:focus-visible,
.dl-rung:focus-visible,
.yz-die:focus-visible,
.cm-orb:focus-visible,
.mem-cell:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
  z-index: 1;
}
/* Remove the default focus ring when focus came from a click (focus but
 * not :focus-visible). This uses the :focus:not(:focus-visible) pattern. */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* Wave 8 #174: Reduced-motion mode. Either prefers-reduced-motion OR
 * manual .a11y-reduced-motion class. Animations squashed to near-zero
 * but not disabled entirely — feedback still happens, just faster. */
.a11y-reduced-motion *,
.a11y-reduced-motion *::before,
.a11y-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.05s !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.a11y-motion-ok) *,
  html:not(.a11y-motion-ok) *::before,
  html:not(.a11y-motion-ok) *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.05s !important;
  }
}

/* Wave 8 #183: High-contrast theme. Bumps text-to-bg contrast and
 * thickens borders so every interactive element is obvious. Targets
 * WCAG AAA (7:1) on primary text. */
html.a11y-high-contrast {
  --bg: #000;
  --bg-card: #0d0d0d;
  --bg-input: #141414;
  --border: #fff;
  --text: #fff;
  --text-bright: #fff;
  --text-muted: #e5e5e5;
  --text-secondary: #ffffff;
  --accent: #00ff47;
  --gold: #ffd000;
  --red: #ff2828;
  --purple: #c470ff;
}
html.a11y-high-contrast .btn,
html.a11y-high-contrast .sidebar-link,
html.a11y-high-contrast .game-card,
html.a11y-high-contrast input,
html.a11y-high-contrast select,
html.a11y-high-contrast textarea {
  border-width: 2px !important;
}
html.a11y-high-contrast a { text-decoration: underline; }

/* Wave 8 #184: Font-scaler. Root font-size is multiplied by the
 * --a11y-font-scale variable (0.9–1.25). Uses a media-query-like
 * fallback: 100% when unset. */
html { font-size: calc(16px * var(--a11y-font-scale, 1)); }

/* Wave 8 #179: Hide-losses mode. Red profit spans get replaced via
 * CSS content, keeping the element in the DOM but visually neutral. */
html.a11y-hide-losses .result-banner.loss .result-banner-amount,
html.a11y-hide-losses .bet-list .bet-row.loss .bet-profit {
  visibility: hidden;
  position: relative;
}
html.a11y-hide-losses .result-banner.loss .result-banner-amount::after,
html.a11y-hide-losses .bet-list .bet-row.loss .bet-profit::after {
  content: '—';
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-muted);
}

/* Wave 7 #157: Long-press context menu override — disabled on interactive
 * surfaces so iOS Safari doesn't pop the "Save Image / Copy Link" tray
 * when a user just holds a button slightly long. Left ON for inputs and
 * text selection, so copying addresses/usernames still works. */
.btn, .game-card, .sidebar-link, .mobile-nav a, .dl-rung, .st-block,
.yz-die, .cm-orb, .cs-cell, .el-reel, .rt-pick-row,
.cover-svg, .game-header, .topbar-logo {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Wave 7 #165: Guarantee 48px minimum tap target on all primary buttons
 * and mobile-nav slots. Touch targets < 48px fail WCAG 2.5.5 and feel
 * clunky on phone. Play buttons and bet controls already pass; this
 * audit adds a floor for anything that might've slipped. */
@media (max-width: 900px) {
  .btn-play, .btn-primary, .btn-secondary { min-height: 48px; }
  .mobile-nav a { min-height: 52px; }
  .sidebar-link { min-height: 44px; }
  .reload-modal-btn, .pack-picker-btn { min-height: 48px; }
}

/* Scrolling perf: give long lists isolation so repaints don't cascade */
.game-grid,
.live-bets-scroll,
.chat-messages {
  contain: layout style;
}

/* Content-visibility for the massive game grid = don't paint offscreen cards */
@media (min-width: 901px) {
  .game-card {
    content-visibility: auto;
    contain-intrinsic-size: 260px 320px;
  }
}

/* Reduce backdrop-filter blur weight on mobile — backdrop-filter is GPU-heavy */
@media (max-width: 900px) {
  .topbar { backdrop-filter: none; background: var(--bg-topbar); }
  .topbar.scrolled { backdrop-filter: blur(10px); }
  .chat-panel { backdrop-filter: none; }
}

/* Respect user preference for reduced motion — wins over everything above */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}