/* SOLOMON199 purple lobby theme
 * Shared across guest, lobby, account, promotion, reward, and support surfaces.
 */
:root {
    --bg: #07050b;
    --bg-elevated: #100c16;
    --surface: #17111f;
    --surface-2: #21192b;
    --surface-hover: #2d2435;
    --border: #2d2435;
    --border-strong: #4a3e57;
    --primary: #6d28d9;
    --primary-hover: #8b5cf6;
    --primary-active: #4c1d95;
    --primary-soft: rgba(109, 40, 217, .2);
    --text: #fafafa;
    --text-secondary: #c4b5fd;
    --text-muted: #a79faf;
    --focus: 0 0 0 4px rgba(139, 92, 246, .34);
    --accent-mint: oklch(82% .16 158);
    --accent-mint-ink: oklch(22% .055 158);
    --accent-mint-surface: oklch(26% .055 158);
    --accent-amber: oklch(84% .15 82);
    --accent-amber-ink: oklch(25% .055 75);
    --accent-amber-surface: oklch(27% .06 75);
    --accent-rose: oklch(72% .17 8);
    --accent-rose-ink: oklch(22% .06 8);
    --accent-rose-surface: oklch(25% .065 8);
    --surface-depth-1: oklch(14% .012 303);
    --surface-depth-2: oklch(18% .018 303);
    --surface-depth-3: oklch(22% .026 303);
    --semantic-success: var(--accent-mint);
    --semantic-success-ink: var(--accent-mint-ink);
    --semantic-success-surface: var(--accent-mint-surface);
    --semantic-warning: var(--accent-amber);
    --semantic-warning-ink: var(--accent-amber-ink);
    --semantic-warning-surface: var(--accent-amber-surface);
    --semantic-danger: var(--accent-rose);
    --semantic-danger-ink: var(--accent-rose-ink);
    --semantic-danger-surface: var(--accent-rose-surface);
    --badge-new: var(--accent-mint);
    --badge-new-ink: var(--accent-mint-ink);
    --favorite: oklch(72% .17 8);
    --favorite-hover: oklch(79% .14 8);
    --favorite-soft: oklch(24% .07 8);

    --color-bg: #07050b;
    --color-bg-elevated: #100c16;
    --color-surface: #17111f;
    --color-surface-2: #21192b;
    --color-surface-hover: #2d2435;
    --color-border: #2d2435;
    --color-border-strong: #4a3e57;
    --color-primary: #6d28d9;
    --color-primary-hover: #8b5cf6;
    --color-primary-active: #4c1d95;
    --color-primary-soft: rgba(109, 40, 217, .2);
    --color-primary-ring: rgba(139, 92, 246, .34);
    --color-text: #fafafa;
    --color-text-secondary: #c4b5fd;
    --color-text-muted: #a79faf;
    --color-info: #c4b5fd;
}

html,
body {
    background-color: #07050b;
}

.lobby-shell,
.account-page,
.auth-page,
.support-page {
    background-color: #07050b;
}

.lobby-shell {
    background-image:
        radial-gradient(circle at 76% 5%, rgba(109, 40, 217, .13), transparent 28%),
        radial-gradient(circle at 18% 58%, rgba(76, 29, 149, .09), transparent 34%);
}

.wordmark {
    color: #fafafa;
    letter-spacing: .01em;
}

.wordmark span {
    color: #8b5cf6;
}

.side-nav {
    border-color: rgba(74, 62, 87, .58);
    background: linear-gradient(180deg, #0a0710 0%, #100c16 66%, #160d25 100%);
}

.nav-link {
    color: #aaa1b2;
}

.nav-link:hover {
    color: #fafafa;
    background: #17111f;
}

.nav-link.is-active,
.account-page .nav-link.is-active {
    color: #fafafa;
    background: rgba(109, 40, 217, .22);
    box-shadow: inset 3px 0 #8b5cf6;
}

.topbar,
.conversation-head {
    border-color: rgba(74, 62, 87, .56);
    background: rgba(7, 5, 11, .96);
}

.search-box input,
.message-field textarea,
.account-field input,
.account-field select,
.input-wrap input,
.input-wrap select {
    color: #fafafa;
    border-color: #2d2435;
    background: #100c16;
}

.search-box input::placeholder,
.message-field textarea::placeholder,
.account-field input::placeholder,
.input-wrap input::placeholder {
    color: #a79faf;
    opacity: 1;
}

.search-box input:hover,
.message-field textarea:hover,
.account-field input:hover,
.account-field select:hover,
.input-wrap input:hover,
.input-wrap select:hover {
    border-color: #4a3e57;
    background: #17111f;
}

.search-box input:focus-visible,
.message-field textarea:focus-visible,
.account-field input:focus-visible,
.account-field select:focus-visible,
.input-wrap:focus-within {
    border-color: #8b5cf6;
}

.button--primary,
.send-button,
.member-bottom-nav__wallet::before {
    border-color: transparent;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 58%, #4c1d95 100%);
}

.button--primary:hover,
.send-button:hover:not(:disabled) {
    border-color: transparent;
    background: linear-gradient(135deg, #9f7aea 0%, #7c3aed 58%, #5b21b6 100%);
}

.button--primary:active,
.send-button:active:not(:disabled) {
    border-color: transparent;
    background: #4c1d95;
}

.button--secondary {
    color: #fafafa;
    border-color: #4a3e57;
    background: #17111f;
}

.button--secondary:hover {
    border-color: #8b5cf6;
    background: #21192b;
}

.balance-compact {
    background: #17111f;
    box-shadow: inset 0 0 0 1px #2d2435;
}

.balance-compact span,
.mobile-wallet span {
    color: #a79faf;
}

.balance-compact strong,
.mobile-wallet strong,
.deposit-overview__balance strong,
.available-panel > strong,
.balance-strip strong {
    color: #fafafa;
    font-variant-numeric: tabular-nums;
}

.notification-button {
    color: #c4b5fd;
    background: rgba(109, 40, 217, .18);
}

.notification-button:hover,
.notification-button[aria-expanded="true"] {
    background: rgba(109, 40, 217, .32);
}

.avatar {
    color: #fafafa;
    border-color: #8b5cf6;
    background: #211239;
}

.hero {
    border-color: #2d2435;
    background-color: #07050b;
    background-image:
        linear-gradient(90deg, rgba(7, 5, 11, .98) 0%, rgba(16, 12, 22, .82) 48%, rgba(7, 5, 11, .18) 100%),
        url("../images/bgt1-solomon199.jpg");
}

.hero__tag,
.section-heading__action,
.text-button,
.member-services__heading button {
    color: #c4b5fd;
}

.provider-explorer,
.desktop-member-services,
.catalog-game-card,
.hourly-game-card,
.member-menu-dialog,
.coupon-dialog,
.lobby-contact-dialog,
.notification-popover {
    border-color: #2d2435;
    background-color: #100c16;
}

.catalog-game-card,
.hourly-game-card {
    background: #17111f;
}

.catalog-game-art--fallback,
.hourly-game-card__art--fallback {
    background: linear-gradient(145deg, #2b1745, #17111f 68%);
}

/* Mobile wallet moods: change only the modifier class in lobby.php to switch. */
.mobile-wallet {
    position: relative;
    isolation: isolate;
    min-height: 88px;
    padding: 12px 13px;
    overflow: hidden;
    align-items: center;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(112deg, #21162e 0%, #120d1a 58%, #29154a 100%);
    box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .16);
}

.mobile-wallet::before {
    position: absolute;
    z-index: -1;
    top: -66px;
    right: -46px;
    width: 190px;
    height: 190px;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .34) 0%, rgba(109, 40, 217, .12) 44%, transparent 70%);
    pointer-events: none;
}

.mobile-wallet__balance {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.mobile-wallet__label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cfc5dc;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 650;
}

.mobile-wallet__label-icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: #ddd6fe;
    border-radius: 8px;
    background: rgba(139, 92, 246, .18);
    box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .14);
}

.mobile-wallet__label-icon svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-wallet strong {
    display: block;
    margin-top: 5px;
    color: #fafafa;
    font-size: 24px;
    line-height: 1.05;
    font-weight: 780;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}

.mobile-wallet__balance > small {
    display: flex;
    margin-top: 5px;
    align-items: center;
    gap: 6px;
    color: #aaa1b2;
    font-size: 9px;
    line-height: 1.2;
}

.mobile-wallet__status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent-mint);
    box-shadow: 0 0 0 3px oklch(82% .16 158 / .13);
}

.mobile-wallet strong.is-unavailable + small .mobile-wallet__status-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .13);
}

.mobile-wallet__actions {
    position: relative;
    z-index: 1;
    width: auto;
    grid-template-columns: repeat(2, minmax(78px, 86px));
    gap: 7px;
}

.mobile-wallet__actions .button {
    min-height: 44px;
    min-width: 0;
    padding: 7px 9px;
    gap: 6px;
    flex-direction: row;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 720;
    white-space: nowrap;
    transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.mobile-wallet__actions .button svg {
    width: 16px;
    height: 16px;
}

.mobile-wallet__actions .button > span {
    color: inherit;
}

.mobile-wallet__actions .button--primary {
    color: #fff;
    border: 0;
    background: linear-gradient(145deg, #7c3aed 0%, #6d28d9 56%, #5622a9 100%);
    box-shadow: 0 4px 8px rgba(45, 16, 83, .4);
}

.mobile-wallet__actions .button--primary:hover {
    background: linear-gradient(145deg, #8050dc 0%, #7138d3 56%, #5b21b6 100%);
    box-shadow: 0 5px 8px rgba(45, 16, 83, .46);
    transform: translateY(-1px);
}

.mobile-wallet__actions .button--primary:active {
    background: #5722a7;
    box-shadow: 0 2px 4px rgba(45, 16, 83, .4);
    transform: translateY(0);
}

.mobile-wallet__actions .button--secondary {
    color: #ede9fe;
    border-color: rgba(196, 181, 253, .25);
    background: rgba(23, 17, 31, .86);
}

.mobile-wallet__actions .button--secondary:hover {
    color: #fff;
    border-color: rgba(196, 181, 253, .48);
    background: #2a1d39;
    transform: translateY(-1px);
}

.mobile-wallet__actions .button:focus-visible {
    outline: 0;
    box-shadow: var(--focus);
}

/* Platinum: restrained graphite with a pale-lavender primary action. */
.mobile-wallet--platinum {
    background: linear-gradient(112deg, #24212b 0%, #111016 60%, #1d1928 100%);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .18);
}

.mobile-wallet--platinum::before {
    background: radial-gradient(circle, rgba(226, 232, 240, .18) 0%, rgba(196, 181, 253, .08) 46%, transparent 70%);
}

.mobile-wallet--platinum .mobile-wallet__actions .button--primary {
    color: #1a1027;
    background: #ddd6fe;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .34);
}

.mobile-wallet--platinum .mobile-wallet__actions .button--primary:hover {
    background: #ede9fe;
}

/* Royal: a committed plum surface for the boldest treatment. */
.mobile-wallet--royal {
    background: linear-gradient(112deg, #3b1768 0%, #27103f 55%, #4a1f78 100%);
    box-shadow: inset 0 0 0 1px rgba(221, 214, 254, .22);
}

.mobile-wallet--royal::before {
    background: radial-gradient(circle, rgba(221, 214, 254, .25) 0%, rgba(139, 92, 246, .12) 44%, transparent 70%);
}

.mobile-wallet--royal .mobile-wallet__label,
.mobile-wallet--royal .mobile-wallet__balance > small {
    color: #e9ddf5;
}

.mobile-wallet--royal .mobile-wallet__actions .button--primary {
    color: #2f124f;
    background: #f5f3ff;
    box-shadow: 0 4px 8px rgba(26, 8, 45, .4);
}

.mobile-wallet--royal .mobile-wallet__actions .button--primary:hover {
    background: #fff;
}

.mobile-wallet--royal .mobile-wallet__actions .button--secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
    background: rgba(31, 11, 52, .6);
}

.catalog-game-provider-badge,
.hourly-game-card__rank {
    background: #2d2435;
}

.member-menu-grid > a > span,
.member-menu-grid > button > span,
.member-services__shortcuts > a > span,
.member-services__shortcuts > button > span,
.desktop-member-services__shortcuts > a > span,
.desktop-member-services__shortcuts > button > span {
    background: #21192b;
    box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .2);
}

.member-menu-grid > a:hover,
.member-menu-grid > button:hover,
.member-menu-actions > a:hover,
.member-menu-actions > button:hover,
.desktop-member-services__shortcuts > a:hover,
.desktop-member-services__shortcuts > button:hover {
    background: rgba(109, 40, 217, .14);
}

.category-tabs button {
    color: #aaa1b2;
    background: #17111f;
}

.category-tabs button.is-active,
.game-type-tabs button.is-active {
    color: #fafafa;
    border-color: #8b5cf6;
    background: rgba(109, 40, 217, .28);
}

.game-type-tabs button {
    border-color: #2d2435;
    background: #100c16;
}

.game-type-tabs__icon {
    color: #c4b5fd;
    background: rgba(109, 40, 217, .2);
}

/* Restrained supporting palette: color identifies meaning, never decoration. */
.category-tabs button[data-filter="popular"]:not(.is-active) svg {
    color: var(--accent-amber);
}

.category-tabs button[data-filter="new"]:not(.is-active) svg {
    color: var(--accent-mint);
}

.category-tabs button[data-favorites-filter]:not(.is-active) svg {
    color: #f08aa5;
}

.game-type-tabs button[data-provider-category="casino"]:not(.is-active) .game-type-tabs__icon {
    color: var(--accent-amber);
    background: var(--accent-amber-surface);
}

.game-type-tabs button[data-provider-category="fish"]:not(.is-active) .game-type-tabs__icon {
    color: var(--accent-mint);
    background: var(--accent-mint-surface);
}

.hourly-games {
    background: radial-gradient(circle at 4% 0%, oklch(84% .15 82 / .09), transparent 27%);
}

.hourly-games__title-spark,
.hourly-games__timing svg {
    color: var(--accent-amber);
}

.hourly-games__progress-marker {
    border-color: oklch(91% .11 85);
    background: var(--accent-amber);
    box-shadow: 0 0 0 3px oklch(84% .15 82 / .12);
}

.hourly-game-card[data-hourly-rank="1"] .hourly-game-card__rank {
    color: var(--accent-amber-ink);
    background: var(--accent-amber);
}

.hourly-game-card__percentage {
    color: var(--accent-mint);
    background: var(--accent-mint-surface);
}

/* Account surfaces */
.account-panel,
.available-panel,
.deposit-overview,
.deposit-support,
.identity-banner,
.loss-return-period,
.loss-return-ledger,
.loss-return-rules,
.loss-return-media,
.loss-return-support,
.affiliate-round,
.affiliate-friends,
.redeem-item,
.promotion-item,
.prize-game-stage,
.prize-redeem {
    border-color: #2d2435;
    background-color: #100c16;
}

.wallet-mode-switch {
    background: #100c16;
    box-shadow: inset 0 0 0 1px #2d2435;
}

.wallet-mode-switch a.is-active {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9 62%, #4c1d95);
}

.identity-banner,
.redeem-balance,
.affiliate-hero {
    background: linear-gradient(115deg, #100c16 0%, #17111f 56%, #2a1742 100%);
}

.deposit-overview__status,
.deposit-method-option,
.method-option,
.available-panel,
.transaction-card,
.affiliate-metrics,
.redeem-item,
.prize-redeem {
    background-color: #17111f;
}

.deposit-method-option:has(input:checked),
.method-option:has(input:checked) {
    border-color: #8b5cf6;
    background: rgba(109, 40, 217, .18);
}

.deposit-method-artwork,
.security-step__icon,
.state-icon--password,
.setting-icon,
.prize-redeem__copy > span {
    background-color: #2a1742;
}

.account-page-head p,
.panel-heading p,
.promotion-item p,
.redeem-item p,
.affiliate-section-head p {
    color: #aaa1b2;
}

.balance-strip {
    background: #100c16;
    box-shadow: inset 0 0 0 1px #2d2435;
}

/* Cross-product semantic palette
 * Violet = action/current, mint = verified/success,
 * amber = rank/reward/time/pending, rose = error/favorite.
 */
.account-page {
    --success: var(--semantic-success);
    --warning: var(--semantic-warning);
    --danger: var(--semantic-danger);
}

.status--success,
.profile-alert--success,
.deposit-overview__status.is-ready,
.redeem-item__status--ready,
.affiliate-live-status.is-ready {
    color: var(--semantic-success);
    background: var(--semantic-success-surface);
}

.status--warning,
.deposit-overview__status.is-unavailable,
.redeem-item__status--locked,
.affiliate-live-status,
.affiliate-live-status.is-error,
.prize-game-notice {
    color: var(--semantic-warning);
    background: var(--semantic-warning-surface);
}

.status--danger,
.profile-alert--error,
.redeem-result-dialog__icon.is-error,
.chat-notice {
    color: var(--semantic-danger);
    background: var(--semantic-danger-surface);
}

.status--success svg,
.status--warning svg,
.status--danger svg {
    color: currentColor;
}

/* Profile: stronger surface separation and an achievement-colored rank. */
.account-page--profile .account-main {
    background-image: radial-gradient(circle at 92% 4%, oklch(62% .19 300 / .08), transparent 24rem);
}

.account-page--profile .identity-banner {
       border-color: oklch(0.34 0.1 305.23);
       background: radial-gradient(ellipse 66% 136% at 108% -20%, oklch(0.57 0.16 277.71 / 0.28) 0%, transparent 64%), radial-gradient(ellipse 48% 110% at 84% 112%, oklch(52% .15 290 / .18) 0%, transparent 70%), linear-gradient(112deg, oklch(0.15 0.04 300.82) 0%, oklch(0.26 0.09 295.3) 46%, oklch(0.1 0 0) 74%, #4c3189 100%);
}

.account-page--profile .identity-banner::after {
    background: radial-gradient(circle, oklch(68% .2 322 / .24), transparent 68%);
}

.account-page--profile .identity-avatar {
    color: oklch(94% .035 303);
    border-color: oklch(70% .13 303);
    background: oklch(28% .075 303);
}

.account-page--profile .identity-kicker {
    color: oklch(82% .09 303);
}

.account-page--profile .account-panel {
    border-color: oklch(29% .025 303);
    background: var(--surface-depth-1);
}

.account-page--profile .verification-panel {
    background: var(--surface-depth-2);
}

.account-page--profile .rank-heading b,
.account-page--profile .rank-meta span:first-child,
.account-page--profile .profile-activity time {
    color: var(--accent-amber);
}

.account-page--profile .progress-bar {
    background: oklch(27% .035 303);
}

.account-page--profile .progress-bar i {
    background: var(--accent-amber);
}

.account-page--profile .state-icon,
.account-page--profile .bank-mark {
    color: var(--accent-mint);
    background: var(--accent-mint-surface);
}

.bank-mark:has(img),
.method-mark--bank:has(img) {
    background: var(--surface-depth-3);
}

.account-page--profile .state-icon--password {
    color: #d8c8ff;
    background: oklch(27% .07 303);
}

.account-page--profile .status-text,
.account-page--profile .form-message.is-success,
.account-page--profile .copy-button.is-copied {
    color: var(--accent-mint);
}

.account-page--profile .support-strip {
    border-color: oklch(34% .045 303);
    background: var(--surface-depth-2);
}

/* Wallet flows: current stays violet; completed and available become mint. */
.withdraw-stepper li.is-complete span,
.deposit-stepper li.is-complete span {
    color: var(--semantic-success);
    border-color: oklch(52% .11 158);
    background: var(--semantic-success-surface);
}

.withdraw-stepper li.is-complete::after,
.deposit-stepper li.is-complete:not(:last-child)::after {
    background: oklch(52% .11 158);
}

.available-panel > strong:not(.is-unavailable),
.deposit-overview__balance strong:not(.is-unavailable),
.amount--positive,
.receipt-state__icon {
    color: var(--semantic-success);
}

.deposit-method-state.is-warning,
.deposit-unavailable > svg,
.loss-return-status--warning {
    color: var(--semantic-warning);
}

.loss-return-status--success {
    color: var(--semantic-success);
}

/* Rewards, promotions, affiliate and prize surfaces. */
.redeem-balance__icon {
    color: var(--accent-amber);
    background: var(--accent-amber-surface);
}

.redeem-balance__points > strong small,
.redeem-item__value,
.redeem-item__action > strong,
.redeem-catalog-heading > span svg,
.promotion-item__time svg,
.promotion-facts dd,
.affiliate-metrics small,
.affiliate-code--unavailable > svg,
.prize-game-state__copy time {
    color: var(--accent-amber);
}

.redeem-item__progress i,
.affiliate-live-status i {
    background: var(--accent-amber);
}

.redeem-item.is-eligible {
    box-shadow: inset 0 0 0 1px oklch(52% .1 158);
}

.redeem-result-dialog__icon,
.affiliate-claim__icon {
    color: var(--accent-mint);
    background: var(--accent-mint-surface);
}

.affiliate-live-status.is-ready i,
.promotion-item__availability i,
.support-mark > span,
.online-dot,
.agent-avatar span {
    background: var(--accent-mint);
}

.affiliate-claim {
    background: oklch(17% .028 158);
}

.promotion-facts {
    background: oklch(29% .025 303);
}

.promotion-facts div,
.affiliate-code,
.transaction-card__amount {
    background: var(--surface-depth-1);
}

.prize-game {
    --prize-gold: var(--accent-amber);
}

.prize-game-state__heart::before {
    background: oklch(55% .18 8 / .28);
}

/* Authentication and support use the same state language. */
.auth-page {
    --color-success: var(--semantic-success);
    --color-danger: var(--semantic-danger);
}

.stepper__item--complete .stepper__dot,
.check-row input:checked + .check-box {
    color: var(--semantic-success-ink);
    border-color: var(--semantic-success);
    background: var(--semantic-success);
}

.stepper__item--current .stepper__dot {
    border-color: #8b5cf6;
    background: #6d28d9;
}

.success-state__icon {
    color: var(--semantic-success);
    border-color: var(--semantic-success);
    background: var(--semantic-success-surface);
}

.transaction-card--deposit,
.transaction-card--success {
    --transaction-accent: var(--semantic-success);
    --transaction-soft: var(--semantic-success-surface);
    --transaction-ink: var(--semantic-success);
    --status-accent: var(--semantic-success);
    --status-soft: var(--semantic-success-surface);
    --status-ink: var(--semantic-success);
}

.transaction-card--pending,
.transaction-card--processing {
    --status-accent: var(--semantic-warning);
    --status-soft: var(--semantic-warning-surface);
    --status-ink: var(--semantic-warning);
}

.transaction-card--failed,
.transaction-card--cancelled {
    --status-accent: var(--semantic-danger);
    --status-soft: var(--semantic-danger-surface);
    --status-ink: var(--semantic-danger);
}

/* Guest and authentication surfaces */
.auth-page {
    background-image: radial-gradient(circle at 82% 10%, rgba(109, 40, 217, .16), transparent 32%);
}

.brand-panel {
    background-color: #07050b;
    background-image:
        linear-gradient(90deg, rgba(7, 5, 11, .96) 0%, rgba(7, 5, 11, .69) 42%, rgba(7, 5, 11, .12) 76%),
        linear-gradient(0deg, rgba(7, 5, 11, .96) 0%, rgba(7, 5, 11, .24) 50%, rgba(7, 5, 11, .14) 100%),
        url("../images/bgt1-solomon199.jpg");
}

.auth-workspace {
    background: #0b0810;
}

.auth-heading__icon,
.auth-contact__mark,
.auth-channel-mark--web,
.support-mark,
.agent-avatar,
.message-avatar {
    color: #fafafa;
    background: #6d28d9;
}

.auth-card .button--primary {
    min-height: 50px;
}

.stepper__item--current .stepper__dot,
.check-row input:checked + .check-box {
    border-color: #8b5cf6;
    background: #6d28d9;
}

.stepper__item--complete .stepper__dot {
    color: var(--semantic-success-ink);
    border-color: var(--semantic-success);
    background: var(--semantic-success);
}

.auth-contact-dialog,
.channel-dialog,
.password-dialog,
.affiliate-dialog,
.prize-result-dialog {
    border-color: #4a3e57;
    background: #100c16;
}

/* Support */
.support-sidebar,
.composer {
    border-color: #2d2435;
    background: #100c16;
}

.conversation {
    background: radial-gradient(circle at 52% 0, rgba(109, 40, 217, .1), transparent 34%), #07050b;
}

.message-bubble,
.transaction-card {
    background: #17111f;
}

.message-row--member .message-bubble,
.transaction-card__action {
    background: #6d28d9;
}

@media (max-width: 780px) {
    body.lobby-page,
    body.account-page {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .topbar {
        display: grid;
        height: 62px;
        padding-inline: 12px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 8px;
        background: #07050b;
    }

    .topbar__brand {
        position: static;
        margin: 0;
        justify-self: center;
        font-size: 18px;
        letter-spacing: .06em;
        transform: none;
    }

    .topbar__actions {
        margin-left: 0;
    }

    .lobby-main {
        padding-top: 6px;
    }

    .member-services {
        padding-top: 4px;
    }

    .member-services__carousel {
        border-radius: 14px;
        background: #17111f;
        box-shadow: inset 0 0 0 1px #2d2435;
    }

    .member-services__banner-track {
        aspect-ratio: 2.15;
    }

    .member-services__banner-slide {
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .member-services__banner-slide:first-child::after {
        position: absolute;
        z-index: 0;
        inset: 0;
        content: "";
        background: linear-gradient(90deg, rgba(7, 5, 11, .96) 0%, rgba(16, 12, 22, .76) 50%, rgba(7, 5, 11, .08) 84%);
        pointer-events: none;
    }

    .member-services__banner-slide:first-child img {
        object-position: 59% 44%;
        transform: scale(1.03);
    }

    .member-services__promo-copy {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 17px;
        display: flex;
        max-width: 55%;
        flex-direction: column;
        color: #fafafa;
        text-decoration: none;
        transform: translateY(-50%);
    }

    .member-services__promo-copy small {
        width: max-content;
        padding: 3px 7px;
        color: #c4b5fd;
        border-radius: 5px;
        background: rgba(109, 40, 217, .26);
        font-size: 8px;
        line-height: 1.3;
        font-weight: 750;
        letter-spacing: .06em;
    }

    .member-services__promo-copy strong {
        margin-top: 7px;
        font-size: 20px;
        line-height: 1.1;
        letter-spacing: -.025em;
        text-wrap: balance;
    }

    .member-services__promo-copy em {
        margin-top: 6px;
        color: #d8cff2;
        font-size: 9px;
        line-height: 1.45;
        font-style: normal;
    }

    .mobile-wallet {
        margin-top: 10px;
    }

    .member-services__heading {
        margin-top: 7px;
    }

    .member-services__shortcuts > a,
    .member-services__shortcuts > button {
        color: #c8c1cd;
    }

    .member-services__shortcuts > a > span,
    .member-services__shortcuts > button > span {
        border-radius: 12px;
        background: #21192b;
    }

    .search-box--mobile input {
        background: #100c16;
    }

    .bottom-nav {
        --wallet-button-size: clamp(52px, 13vw, 58px);
        isolation: isolate;
        height: calc(78px + env(safe-area-inset-bottom));
        padding: 8px 5px env(safe-area-inset-bottom);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        border-top: 0;
        background: linear-gradient(180deg, #17111f 0%, #100c16 30%);
        box-shadow: inset 0 1px 0 rgba(139, 92, 246, .34), 0 -10px 30px rgba(7, 5, 11, .42);
    }

    .bottom-nav::before {
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        content: "";
        background:
            linear-gradient(90deg, transparent, rgba(196, 181, 253, .52)) left center / calc(50% - 38px) 1px no-repeat,
            linear-gradient(90deg, rgba(196, 181, 253, .52), transparent) right center / calc(50% - 38px) 1px no-repeat;
    }

    .bottom-nav a,
    .bottom-nav button {
        position: relative;
        min-height: 60px;
        gap: 4px;
        color: #aaa1b2;
        font-weight: 600;
    }

    .bottom-nav a.is-active,
    .bottom-nav button.is-active {
        color: #c4b5fd;
    }

    .bottom-nav .member-bottom-nav__wallet {
        position: relative;
        z-index: 1;
        color: #aaa1b2;
        transform: none;
    }

    .bottom-nav .member-bottom-nav__wallet.is-active {
        color: #c4b5fd;
    }

    .member-bottom-nav__wallet::before {
        position: absolute;
        z-index: -1;
        top: calc(var(--wallet-button-size) * -.5);
        left: 50%;
        width: var(--wallet-button-size);
        height: var(--wallet-button-size);
        content: "";
        border-radius: 50%;
        box-shadow: 0 0 0 5px #07050b, 0 8px 14px rgba(38, 11, 76, .52);
        transform: translateX(-50%);
    }

    .bottom-nav .member-bottom-nav__wallet svg {
        width: 25px;
        height: 25px;
        color: #fafafa;
        stroke-width: 1.75;
        transform: translateY(calc(var(--wallet-button-size) * -.46));
    }

    .bottom-nav .member-bottom-nav__wallet span {
        margin-top: 0;
        color: inherit;
        transform: translateY(-1px);
    }

    .contact-fab {
        display: none;
    }

    .back-to-games {
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(92px + env(safe-area-inset-bottom));
    }

    body.lobby-page #toolbarContainer #debug-icon,
    body.account-page #toolbarContainer #debug-icon {
        display: none !important;
    }

    .account-main {
        padding-top: 18px;
    }

    .account-page-head h1 {
        color: #fafafa;
    }

    .account-panel,
    .deposit-overview,
    .available-panel,
    .identity-banner,
    .prize-game-stage {
        border-color: #2d2435;
    }

    .auth-workspace {
        background: #07050b;
    }
}

@media (max-width: 420px) {
    .member-services__banner-track {
        aspect-ratio: 2.02;
    }

    .mobile-wallet {
        gap: 9px;
    }

    .mobile-wallet strong {
        font-size: 22px;
    }

    .member-services__promo-copy strong {
        font-size: 18px;
    }

    .member-services__banner-arrow {
        display: none;
    }
}

@media (max-width: 359px) {
    .topbar__brand {
        font-size: 15px;
        letter-spacing: .025em;
    }

    .mobile-wallet {
        align-items: stretch;
        flex-direction: column;
    }

    .mobile-wallet__actions {
        width: auto;
        align-self: flex-end;
    }

    .mobile-wallet__actions .button {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-wallet__actions .button {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .member-services__banner-slide:first-child img {
        transform: none;
    }
}