/* 888 Lotto Player v3.10.57 — compact glass black-gold polish and pagination */
:root {
  --bg: #040404 !important;
  --surface: rgba(18, 17, 14, .67) !important;
  --surface-solid: #10100f !important;
  --surface-soft: rgba(31, 27, 18, .72) !important;
  --surface-hover: rgba(51, 42, 22, .72) !important;
  --border: rgba(231, 195, 91, .17) !important;
  --border-strong: rgba(241, 210, 119, .34) !important;
  --text: #faf4e2 !important;
  --muted: #aaa087 !important;
  --primary: #d5aa36 !important;
  --primary-2: #f2db83 !important;
  --sidebar-width: 246px !important;
  --radius: 14px !important;
  --shadow: 0 20px 58px rgba(0, 0, 0, .43) !important;
}

html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-size: 13px;
  background:
    radial-gradient(circle at 86% 0%, rgba(229, 190, 77, .14), transparent 31%),
    radial-gradient(circle at 4% 20%, rgba(143, 104, 23, .09), transparent 28%),
    linear-gradient(145deg, #030303 0%, #0b0906 52%, #040404 100%) !important;
  background-attachment: fixed !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 36px 36px;
}

.sidebar,
.topbar,
.panel,
.stat-card,
.table-wrap,
.modal-card,
.ui-dialog-card,
.notification-panel,
.wallet-action-shell,
.support-popup-card,
.game-card,
.featured-game-card,
.compact-game-card,
.lotto-result-card,
.topbar-wallet-card,
.withdrawal-popup-stat,
.account-center-modal-card {
  border-color: rgba(231, 195, 91, .17) !important;
  background: linear-gradient(145deg, rgba(28, 25, 19, .67), rgba(7, 7, 7, .73)) !important;
  box-shadow: 0 17px 46px rgba(0, 0, 0, .31), inset 0 1px 0 rgba(255, 239, 185, .035) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(125%) !important;
}
.sidebar { background: linear-gradient(180deg, rgba(18, 17, 14, .89), rgba(4, 4, 4, .93)) !important; }

.content { padding: 15px 20px 38px !important; }
.topbar { min-height: 62px !important; padding: 8px 16px !important; }
.sidebar-header { padding: 14px 13px 11px !important; }
.sidebar-nav { padding: 7px 8px 14px !important; gap: 3px !important; }
.nav-button { min-height: 38px !important; padding: 8px 10px !important; border-radius: 10px !important; font-size: 12px !important; }
.sidebar .brand-mark { width: 62px !important; height: 62px !important; border-radius: 18px !important; }
.brand-name { font-size: 16px !important; }
.brand-subtitle { font-size: 11px !important; }

.page-heading,
.view-heading { margin-bottom: 14px !important; }
.page-heading h1,
.page-heading h2,
.view-heading h1,
.view-heading h2 { font-size: clamp(22px, 2vw, 30px) !important; letter-spacing: -.035em !important; }
.page-heading p,
.view-heading p { font-size: 12px !important; line-height: 1.45 !important; }

.panel,
.stat-card { border-radius: 15px !important; }
.panel { padding: 15px !important; }
.stat-card { padding: 13px !important; min-height: 98px !important; }
.panel-grid,
.stats-grid { gap: 11px !important; }
.panel h2,
.panel h3 { font-size: 16px !important; }
.stat-label { font-size: 9.5px !important; letter-spacing: .055em !important; color: #cbb980 !important; }
.stat-value { font-size: clamp(20px, 2vw, 27px) !important; color: #f7e8b3 !important; }

.button,
.mobile-menu-button,
.notification-button,
.sidebar-collapse-button {
  min-height: 36px !important;
  padding: 7px 11px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.button-primary {
  color: #211704 !important;
  background: linear-gradient(180deg, #f3dc87, #c89425) !important;
  border-color: rgba(255, 229, 145, .78) !important;
  box-shadow: 0 9px 22px rgba(143, 99, 13, .23) !important;
}
.button:hover:not(:disabled),
.nav-button:hover,
.mobile-bottom-nav-button:hover { transform: translateY(-1px); }
.button:active:not(:disabled),
.mobile-bottom-nav-button:active { transform: scale(.985); }

.input,
.select,
.textarea,
input,
select,
textarea {
  border-radius: 9px !important;
  border-color: rgba(231, 195, 91, .19) !important;
  background: rgba(3, 3, 3, .55) !important;
  color: #faf4e2 !important;
}
.input,
.select,
input:not([type="checkbox"]):not([type="radio"]),
select { min-height: 38px !important; padding: 8px 10px !important; }
.input:focus,
.select:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(242, 213, 125, .62) !important;
  box-shadow: 0 0 0 3px rgba(231, 195, 91, .10) !important;
}

.table-wrap { border-radius: 13px !important; overflow-x: auto; background: rgba(5,5,5,.53) !important; }
table { font-size: 11.5px !important; }
th,
td { padding: 9px 10px !important; line-height: 1.35 !important; }
th {
  color: #dfcc94 !important;
  background: rgba(231, 195, 91, .065) !important;
  font-size: 9.5px !important;
  letter-spacing: .045em !important;
  white-space: nowrap;
}
td { background: rgba(5,5,5,.34) !important; border-color: rgba(231, 195, 91, .075) !important; }
tbody tr { transition: background .18s ease !important; }
tbody tr:hover td { background: rgba(231, 195, 91, .052) !important; }
.status { padding: 5px 8px !important; font-size: 9.5px !important; }
.small-copy,
.muted { font-size: 10.5px; }

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 38px;
  padding: 7px 5px 3px;
  color: #aaa087;
  font-size: 10px;
}
.table-pagination.hidden { display: none !important; }
.table-pagination-actions { display: flex; align-items: center; gap: 5px; }
.pagination-button {
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid rgba(231, 195, 91, .18);
  border-radius: 8px;
  background: rgba(231, 195, 91, .075);
  color: #ead8a3;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  transition: background .17s ease, border-color .17s ease, transform .17s ease;
}
.pagination-button:hover:not(:disabled) { background: rgba(231, 195, 91, .15); border-color: rgba(231, 195, 91, .34); transform: translateY(-1px); }
.pagination-button:disabled { opacity: .38; cursor: default; }
.table-pagination-page { min-width: 72px; text-align: center; color: #d5c28e; }
.table-pagination-count { margin-right: auto; }

.panel,
.stat-card,
.game-card,
.featured-game-card,
.compact-game-card,
.lotto-result-card,
.wallet-action-card,
.withdrawal-method-option,
.payment-brand-option {
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, box-shadow .24s ease, background .24s ease !important;
}
.game-card:hover,
.featured-game-card:hover,
.compact-game-card:hover,
.lotto-result-card:hover { transform: translateY(-2px); border-color: rgba(241, 209, 112, .31) !important; box-shadow: 0 22px 52px rgba(0,0,0,.38) !important; }
.view[aria-hidden="false"],
.view:not(.hidden) { animation: playerViewIn .28s cubic-bezier(.2,.8,.2,1); }
.modal:not(.hidden) .modal-card,
.account-center-modal:not(.hidden) .account-center-modal-card,
.support-popup-view[aria-hidden="false"] .support-popup-card { animation: glassModalIn .26s cubic-bezier(.2,.8,.2,1); }
@keyframes playerViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes glassModalIn { from { opacity: 0; transform: translateY(11px) scale(.987); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

.mobile-bottom-nav {
  background: rgba(7, 7, 7, .75) !important;
  border-top-color: rgba(231, 195, 91, .17) !important;
  backdrop-filter: blur(24px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(130%) !important;
}
.mobile-bottom-nav-button.active { background: linear-gradient(180deg, #f1d77e, #c69325) !important; color: #1f1604 !important; }

/* Standalone game terminal glass treatment */
.app,
.game-shell { background: transparent !important; }
.app .topbar,
.workspace,
.manual-card,
.keyin-card,
.summary-card,
.side-panel,
.txn-section,
.terminal-card,
.rate-card,
.wallet-box,
.game-logo,
.game-drawer,
.modal-card {
  border-color: rgba(231, 195, 91, .18) !important;
  background: linear-gradient(145deg, rgba(27,24,18,.73), rgba(6,6,6,.78)) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,239,185,.035) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}
.app .topbar { min-height: 70px !important; }
.wallet-box { min-width: 92px !important; padding: 7px 9px !important; }
.game-logo { transform: scale(.94); }
.ball,
.mode-btn,
.type-btn,
.place-btn { transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background .18s ease !important; }
.ball:hover,
.mode-btn:hover,
.type-btn:hover { transform: translateY(-1px); }

@media (max-width: 860px) {
  html { font-size: 13px; }
  .content { padding: 12px 10px 100px !important; }
  .topbar { min-height: 56px !important; padding: 7px 10px !important; }
  .panel { padding: 12px !important; }
  .sidebar .brand-mark { width: 54px !important; height: 54px !important; }
  th, td { padding: 8px !important; }
  .table-pagination { position: sticky; left: 0; width: min(100%, 100vw); }
  .mobile-bottom-nav-button { font-size: 9.5px !important; padding: 7px 4px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.record-page-hidden { display: none !important; }


/* v3.10.58 premium referral topbar overlap fix and richer black-gold finish */
:root {
  --primary: #dcb44a !important;
  --primary-2: #f6de93 !important;
  --border: rgba(239, 199, 93, .22) !important;
  --border-strong: rgba(248, 219, 132, .42) !important;
  --shadow: 0 24px 68px rgba(0, 0, 0, .48) !important;
}
body {
  background:
    radial-gradient(circle at 82% -4%, rgba(247, 212, 117, .16), transparent 28%),
    radial-gradient(circle at 14% 0%, rgba(162, 111, 18, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(255, 229, 146, .05), transparent 32%),
    linear-gradient(145deg, #020202 0%, #080604 54%, #030303 100%) !important;
}
body::before { opacity: .14; }

.sidebar,
.topbar,
.panel,
.stat-card,
.table-wrap,
.modal-card,
.ui-dialog-card,
.notification-panel,
.wallet-action-shell,
.support-popup-card,
.game-card,
.featured-game-card,
.compact-game-card,
.lotto-result-card,
.topbar-wallet-card,
.withdrawal-popup-stat,
.account-center-modal-card {
  border-color: rgba(244, 207, 104, .20) !important;
  background: linear-gradient(145deg, rgba(28, 23, 15, .76), rgba(8, 8, 8, .82)) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 242, 197, .055), inset 0 0 0 1px rgba(243, 203, 91, .03) !important;
}
.sidebar {
  background:
    linear-gradient(180deg, rgba(22, 18, 12, .94), rgba(6, 6, 6, .98)) !important;
}
.topbar {
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  padding-left: 88px !important;
  background: linear-gradient(180deg, rgba(20, 16, 10, .90), rgba(8, 8, 8, .88)) !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(243, 203, 91, .08) !important;
}
.topbar-sidebar-toggle,
.portal.sidebar-collapsed .topbar-sidebar-toggle,
.portal.game-active.sidebar-collapsed .topbar-sidebar-toggle {
  left: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(244, 207, 104, .22) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(32, 24, 12, .95), rgba(14, 12, 9, .92)) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .26) !important;
}
.topbar-sidebar-toggle:hover {
  border-color: rgba(247, 215, 127, .40) !important;
  background: linear-gradient(180deg, rgba(45, 32, 14, .98), rgba(18, 15, 11, .95)) !important;
}
.topbar-sidebar-toggle svg { stroke: #f3d57a !important; }
.header-brand-home {
  position: relative;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(100%, 430px) !important;
  gap: 14px !important;
  padding: 10px 16px 10px 12px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(245, 208, 102, .20) !important;
  background: linear-gradient(135deg, rgba(67, 48, 14, .30), rgba(18, 16, 13, .78)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 237, 184, .12), 0 14px 34px rgba(0,0,0,.24) !important;
  overflow: hidden;
}
.header-brand-home::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.05), transparent 35%, transparent 65%, rgba(244,207,104,.07));
}
.header-brand-mark,
.header-brand-mark.has-logo {
  width: 78px !important;
  height: 78px !important;
  border-radius: 22px !important;
  background: radial-gradient(circle at 35% 30%, rgba(255, 231, 163, .24), rgba(0,0,0,0) 60%), linear-gradient(135deg, rgba(71, 46, 7, .94), rgba(17, 14, 10, .98)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255, 239, 191, .12) !important;
}
.header-brand-mark img { padding: 5px !important; }
.header-brand-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}
.header-brand-copy strong {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff1c4 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
  font-size: clamp(24px, 3.2vw, 30px) !important;
  letter-spacing: -.03em !important;
}
.header-brand-copy small {
  color: rgba(243, 221, 157, .84) !important;
  font-size: 12px !important;
  letter-spacing: .01em !important;
}
.topbar-title {
  min-width: 0 !important;
  flex: 1 1 200px !important;
  gap: 2px !important;
}
.topbar-title strong { color: #ffedb6 !important; }
.topbar-title span { color: rgba(239, 214, 145, .75) !important; }
.topbar-actions {
  flex: 1 1 320px !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
}
.nav-button.active,
.mobile-bottom-nav-button.active {
  background: linear-gradient(180deg, #f7df8f, #ca9228) !important;
  color: #1f1503 !important;
  box-shadow: 0 12px 26px rgba(177, 121, 16, .24) !important;
}
.button-primary {
  background: linear-gradient(180deg, #f8e3a2, #cd9628) !important;
  box-shadow: 0 12px 28px rgba(170, 118, 15, .26) !important;
}
.button-secondary,
.notification-button,
.wallet-refresh-button {
  background: linear-gradient(180deg, rgba(33, 26, 16, .95), rgba(12, 11, 10, .95)) !important;
  border-color: rgba(244, 207, 104, .20) !important;
}
.topbar-wallet-card,
.game-wallet-balance-card.topbar-wallet-card {
  background: linear-gradient(145deg, rgba(31, 24, 14, .88), rgba(9, 9, 9, .88)) !important;
  border-color: rgba(244, 207, 104, .22) !important;
}

@media (max-width: 1180px) {
  .topbar { padding-left: 84px !important; }
  .header-brand-home { max-width: calc(100% - 12px) !important; }
  .topbar-title { flex-basis: 160px !important; }
}
@media (max-width: 960px) {
  .topbar {
    padding-left: 82px !important;
    row-gap: 10px !important;
  }
  .header-brand-home {
    flex: 1 1 calc(100% - 92px) !important;
    max-width: calc(100% - 92px) !important;
  }
  .header-brand-mark,
  .header-brand-mark.has-logo {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
  }
  .header-brand-copy strong { font-size: clamp(18px, 4.4vw, 24px) !important; }
  .topbar-title { order: 2 !important; flex: 1 1 180px !important; }
  .topbar-actions { order: 3 !important; flex-basis: 100% !important; }
}
@media (max-width: 720px) {
  .topbar {
    padding-left: 74px !important;
    gap: 8px !important;
  }
  .topbar-sidebar-toggle,
  .portal.sidebar-collapsed .topbar-sidebar-toggle,
  .portal.game-active.sidebar-collapsed .topbar-sidebar-toggle {
    left: 12px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
  .header-brand-home {
    gap: 10px !important;
    padding: 8px 12px 8px 10px !important;
    border-radius: 20px !important;
  }
  .header-brand-mark,
  .header-brand-mark.has-logo {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
  }
  .header-brand-copy strong { font-size: 15px !important; }
  .header-brand-copy small { font-size: 10px !important; }
  .topbar-title strong { font-size: 14px !important; }
  .topbar-title span { font-size: 10px !important; }
}