/* Navigation geometry and outline icons from the supplied HTML sample. */
:root {
    --navigation-width: 248px;
    --navigation-font: 'Onest', 'Plus Jakarta Sans', Arial, sans-serif;
    --nav-icon-stroke: #8a8d97;
    --nav-icon-accent: #9e7c44;
    --navigation-active: linear-gradient(120deg, #f3dfb0 0%, #e5c58c 48%, #cba15e 100%);
}
.icon-definitions .g { fill: var(--nav-icon-accent, #9e7c44); stroke: none; }
.icon-definitions .gs { stroke: var(--nav-icon-accent, #9e7c44); }
header.top-header {
    margin-left: var(--navigation-width) !important; width: calc(100% - var(--navigation-width)) !important;
    height: 72px; min-height: 72px; gap: 16px; padding: 10px 24px; flex-wrap: nowrap;
    background: #0c0d10 !important; border-bottom-color: #23262e !important;
}
.top-nav-tabs, .top-tab-item, .gold-sidebar, .gold-sidebar *, .category-pills-bar *, .search-providers-bar * { font-family: var(--navigation-font); }
.header-left { gap: 10px; }
.top-nav-tabs {
    width: auto; order: 0; flex-shrink: 0; gap: 2px !important; padding: 5px !important;
    border-radius: 16px !important; background: #121318 !important; border: 1px solid #23262e !important;
}
.top-tab-item {
    flex: 0 0 auto; min-width: 0; max-width: none; height: 42px; min-height: 42px;
    padding: 0 15px !important; gap: 9px; border-radius: 12px !important;
    color: #c8c6c0 !important; font-size: 15px !important; font-weight: 600 !important;
    background: transparent !important; --nav-icon-stroke: #8a8d97; --nav-icon-accent: #9e7c44;
}
.top-tab-item:hover { background: #191b21 !important; color: #edeae3 !important; --nav-icon-stroke: #edeae3; }
.top-tab-item.active, .top-tab-item.active:hover {
    background: var(--navigation-active) !important; color: #1a1408 !important;
    box-shadow: inset 0 1px 0 #fff5d766 !important; --nav-icon-stroke: #1a1408; --nav-icon-accent: #1a1408;
}
.top-tab-item .nav-tab-ico { width: 20px; height: 20px; fill: none; }
.header-right { flex: 0 1 auto; margin-left: auto; gap: 8px; }
.btn-search-trigger { width: 40px !important; height: 40px !important; padding: 0; justify-content: center; }
.header-search-label { display: none; }
.brand-logo-img { width: 126px; }
.btn-header-login, .btn-header-register { min-height: 40px; }
.site-sidebar.gold-sidebar {
    width: var(--navigation-width); padding: 0; top: 0; bottom: 0; left: 0;
    background: #121318 !important; border-right-color: #23262e !important; overflow: visible;
}
.navigation-scroll { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 12px; scrollbar-width: thin; scrollbar-color: #22252c transparent; }
.navigation-scroll > * { flex-shrink: 0; }
.navigation-collapse { position: absolute; top: 24px; right: -13px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #32353d; border-radius: 50%; color: #8a8d97; background: #22252c; }
.navigation-collapse:hover { border-color: #c9974a; }
.navigation-collapse svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gold-account { min-height: 64px; padding: 8px; border: 0; border-radius: 12px; background: transparent; gap: 10px; }
.gold-account:hover { background: #191b21; }
.gold-account > .ui-icon { width: 36px; height: 36px; padding: 8px; background: #22252c; }
.gold-account strong { font-size: 14px; font-weight: 600; white-space: nowrap; }
.gold-account small { font-size: 12px; margin-top: 3px; }
.gold-account b { font-weight: 400; }
.gold-daily { display: flex; flex-direction: column; justify-content: center; min-height: 62px; margin: 8px 0 0; padding: 10px 10px 10px 56px; border: 1px solid #3a301b; border-radius: 12px; background: linear-gradient(115deg,#2b2314,#1c1913 55%,#17171b); }
.gold-daily > .ui-icon { left: 12px; right: auto; top: 14px; width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: #e4bb6818; transform: none; --nav-icon-stroke: #e4bb68; --nav-icon-accent: #e4bb68; }
.gold-daily strong { font-size: 13px; white-space: nowrap; }
.gold-daily small { max-width: none; font-size: 11px; color: #b7a27a; margin-top: 2px; white-space: nowrap; }
.gold-label { padding: 0 12px 6px; margin-top: 20px; letter-spacing: 0; text-transform: none; color: #747782; font-size: 12px; font-weight: 500; }
.gold-more { border-top: 1px solid #23262e; padding-top: 18px; margin-inline: 0; }
.gold-sidebar .sidebar-item { height: 42px; min-height: 42px; gap: 12px; padding: 0 12px; margin: 1px 0; border-radius: 10px; font-size: 14px; font-weight: 500; color: #c8c6c0 !important; --nav-icon-stroke: #8a8d97; --nav-icon-accent: #9e7c44; }
.gold-sidebar .sidebar-item .ui-icon { width: 20px; height: 20px; }
.gold-sidebar .sidebar-item:hover { background: #191b21 !important; --nav-icon-stroke: #edeae3; }
.gold-sidebar .sidebar-item.active { background: linear-gradient(90deg,#e4bb6826,#e4bb6808) !important; box-shadow: none; color: #e4bb68 !important; --nav-icon-stroke: #e4bb68; --nav-icon-accent: #e4bb68; }
.gold-sidebar-bottom { padding: 30px 12px 8px; margin-top: auto; font-size: 11px; }
.app-shell, .app-footer { margin-left: var(--navigation-width) !important; padding-inline: 24px; }
.app-shell, body.home-mode .app-shell { gap: 28px; padding-top: 24px; }
.reference-jackpot { display: none; }
.home-mode .category-pills-bar, .home-mode .search-providers-bar { display: flex; }
.category-pills-bar { order: -2; gap: 8px; padding: 2px; }
.search-providers-bar { position: relative; order: -1; gap: 10px; margin-top: -16px; }
.cat-pill-item { height: 42px; padding: 0 16px 0 12px; border-radius: 12px; background: #121318; border: 1px solid #23262e; font-size: 14px; font-weight: 600; color: #c8c6c0; gap: 9px; --nav-icon-stroke: #8a8d97; --nav-icon-accent: #9e7c44; }
.cat-pill-ico { width: 18px; height: 18px; fill: none; flex-shrink: 0; }
.cat-pill-item.active { color: #e4bb68 !important; background: #e4bb6819 !important; border-color: #e4bb686b !important; --nav-icon-stroke: #e4bb68; --nav-icon-accent: #e4bb68; }
.search-box-field, .providers-dropdown-btn { height: 48px; background: #121318; border: 1px solid #23262e; border-radius: 12px; }
.search-box-field input { font-size: 15px; }
.providers-dropdown-btn { padding: 0 14px; gap: 9px; font-size: 14px; color: #c8c6c0; font-weight: 600; }
.provider-button-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.providers-dropdown-btn[aria-expanded="true"] { background: #191b21; border-color: #e4bb686b; }
.navigation-provider-menu { position: absolute; top: calc(100% + 8px); right: 0; width: min(280px,100%); max-height: 330px; overflow: auto; padding: 8px; background: #191b21; border: 1px solid #32353d; border-radius: 14px; z-index: 115; box-shadow: 0 18px 40px #0007; }
.navigation-provider-menu[hidden] { display: none; }
.navigation-provider-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; border: 0; background: transparent; color: #c8c6c0; padding: 8px 10px; text-align: left; border-radius: 9px; font-size: 13px; }
.navigation-provider-menu button::before { content: ''; width: 15px; height: 15px; border: 1px solid #747782; border-radius: 50%; flex-shrink: 0; }
.navigation-provider-menu button[aria-checked="true"]::before { border: 4px solid #e4bb68; background: #191b21; }
.navigation-provider-menu button:hover, .navigation-provider-menu button:focus-visible { background: #22252c; color: #edeae3; }
.navigation-bottom-slot { display: none; }
@media (min-width: 901px) {
    body.nav-compact { --navigation-width: 72px; }
    .nav-compact .navigation-collapse svg { transform: rotate(180deg); }
    .nav-compact .gold-account span, .nav-compact .gold-account b,
    .nav-compact .gold-daily strong, .nav-compact .gold-daily small,
    .nav-compact .gold-label, .nav-compact .sidebar-item span, .nav-compact .gold-sidebar-bottom { display: none; }
    .nav-compact .gold-account, .nav-compact .gold-sidebar .sidebar-item { justify-content: center; padding: 0; }
    .nav-compact .gold-daily { height: 48px; min-height: 48px; padding: 0; margin-bottom: 14px; }
    .nav-compact .gold-daily > .ui-icon { top: 8px; left: 8px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
    header.top-header { gap: 10px; padding-inline: 20px; flex-wrap: wrap; height: 118px; }
    .top-nav-tabs { order: 3; width: 100%; justify-content: center; }
    .header-right { flex: 0 1 auto; }
    .top-tab-item { height: 36px; min-height: 36px; }
}
@media (max-width: 900px) {
    header.top-header { margin-left: 0 !important; width: 100% !important; height: 64px !important; min-height: 64px !important; padding: 10px 14px; flex-wrap: nowrap; gap: 10px; }
    .header-left { flex: 0 0 auto; gap: 8px; }
    .header-right { flex: 0 1 auto; }
    .brand-logo-img { width: 110px; height: 30px; }
    .app-shell, .app-footer { margin-left: 0 !important; padding-inline: 16px !important; }
    .app-shell, body.home-mode .app-shell { padding-top: 18px; padding-bottom: calc(96px + env(safe-area-inset-bottom,0px)); }
    .app-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom,0px)); }
    .site-sidebar.gold-sidebar { display: none; }
    body.nav-open .site-sidebar.gold-sidebar { display: flex; width: min(280px,85vw); padding: 0; }
    .navigation-collapse { display: none; }
    .navigation-bottom-slot { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; padding: 7px max(10px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px)); border-top: 1px solid #23262e; background: #0c0d10f5; }
    .navigation-bottom-slot .top-nav-tabs { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; max-width: 600px; margin: 0 auto; padding: 4px !important; gap: 3px !important; border-radius: 15px !important; }
    .navigation-bottom-slot .top-tab-item { flex-direction: column; gap: 4px; padding: 5px 2px !important; min-width: 0; height: 52px; min-height: 52px; font-size: 11px !important; line-height: 1.2; border-radius: 11px !important; }
    .navigation-bottom-slot .nav-tab-ico { width: 20px; height: 20px; }
    .header-right .user-profile-pill { display: none !important; }
    .wallet-pill { max-width: 210px; }
    .category-pills-bar { margin: 0 -16px; padding: 2px 16px; max-width: calc(100% + 32px); }
    .search-providers-bar { margin-top: -14px; }
    .mobile-menu-toggle { --nav-icon-stroke: #c8c6c0; --nav-icon-accent: #e4bb68; }
    html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width: 600px) {
    .cat-pill-item { height: 38px; font-size: 13px; padding: 0 13px 0 10px; }
    .search-box-field, .providers-dropdown-btn { height: 46px; }
    .search-box-field input { font-size: 16px; }
    .providers-dropdown-btn { width: 46px; padding: 0; justify-content: center; flex-shrink: 0; }
    .providers-dropdown-btn .provider-button-label, .providers-dropdown-btn > svg:not(.ui-icon) { display: none; }
    .providers-dropdown-btn[aria-label*="Selected"] { border-color: #e4bb68; }
    .header-right .wallet-pill { max-width: 172px; }
    .header-right .btn-search-trigger { width: 32px !important; height: 36px !important; }
}
@media (max-width: 360px) {
    .rail-header-line { flex-wrap: wrap; gap: 8px; }
    .rail-header-line .rail-actions-box { margin-left: auto; }
    .rail-title-box { font-size: 18px; }
    header.top-header { padding-inline: 10px; gap: 6px; }
    .brand-logo-img { width: 86px; }
    .header-left, .header-right { gap: 4px; }
    .header-right .wallet-pill { max-width: 156px; }
    .navigation-bottom-slot .top-tab-item { font-size: 10px !important; }
}

/* The reference uses one compact header, including the real wallet balance. */
header.top-header {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 24px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    background: #0c0d10 !important;
    box-shadow: none !important;
}
.top-nav-tabs { order: 0 !important; width: auto !important; padding: 4px !important; border-radius: 14px !important; justify-content: flex-start !important; }
.top-tab-item { height: 44px !important; min-height: 44px !important; transition: background-color .15s ease, color .15s ease !important; }
.header-right { display: flex; flex: 0 1 auto; flex-wrap: nowrap !important; gap: 10px; align-items: center; margin-left: auto; }
.header-right .wallet-pill { display: flex !important; flex: 0 1 auto; align-items: center; min-width: 0; min-height: 42px; max-width: none; padding: 3px; border-radius: 12px; background: #121318 !important; border: 1px solid #23262e !important; }
.header-right .wallet-balance-box { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; padding: 0 10px !important; text-align: left; color: #edeae3; }
.wallet-balance-label { display: block; font-size: 10px; font-weight: 500; line-height: 1.1; color: #8a8d97; }
.wallet-balance-amount { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 14px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-balance-amount #headerBalanceVal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-currency-sym { color: #edeae3; font-size: inherit; }
.header-right .btn-header-deposit { display: flex; align-items: center; justify-content: center; height: 34px; min-height: 34px; padding: 0 14px !important; border-radius: 9px; font-size: 13px !important; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.header-right .guest-auth-actions, .header-right .btn-search-trigger { display: none !important; }
.header-notification-btn, .header-account-btn { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #23262e; border-radius: 11px; background: #121318; color: #c8c6c0; }
.header-notification-btn:hover, .header-account-btn:hover { background: #191b21; border-color: #c9974a; }
.header-notification-btn .ui-icon, .header-account-btn .ui-icon { width: 21px; height: 21px; --nav-icon-stroke: #8a8d97; --nav-icon-accent: #9e7c44; }
.header-notification-btn[aria-expanded="true"] { border-color: #c9974a; color: #e4bb68; }
.header-notifications { position: absolute; top: calc(100% + 8px); right: 72px; z-index: 140; width: min(260px,calc(100vw - 32px)); padding: 16px; border: 1px solid #32353d; border-radius: 12px; background: #191b21; color: #edeae3; box-shadow: 0 16px 40px #0008; }
.header-notifications[hidden] { display: none; }
.header-notifications strong { display: block; font-size: 14px; }
.header-notifications p { margin-top: 8px; font-size: 13px; color: #8a8d97; }
.has-player .header-account-btn { display: none; }
.header-right .user-profile-pill { flex: 0 1 auto; min-width: 40px; min-height: 40px; max-width: 130px; padding: 4px 8px 4px 4px; border-radius: 11px; background: #121318 !important; border-color: #23262e !important; }
.header-right .user-avatar-circle { flex-shrink: 0; }
.header-right .user-name-text { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 901px) and (max-width: 1200px) {
    header.top-header { gap: 10px !important; padding: 0 16px !important; }
    .top-tab-item { padding: 0 9px !important; font-size: 12px !important; gap: 6px; }
    .top-tab-item .nav-tab-ico { width: 17px; height: 17px; }
    .header-right { gap: 6px; }
    .header-right .wallet-balance-box { padding: 0 7px !important; }
    .header-right .btn-header-deposit { padding: 0 10px !important; }
    .header-right .user-profile-pill { max-width: 45px; padding-right: 4px; }
    .header-right .user-name-text { display: none; }
}
@media (max-width: 900px) {
    header.top-header { gap: 8px !important; padding: 0 14px !important; }
    .header-right { gap: 6px; }
    .header-notification-btn { display: none; }
    .header-right .user-profile-pill { display: none !important; }
    .header-right .wallet-pill { max-width: 164px; min-height: 38px; }
    .header-right .wallet-balance-box { padding: 0 7px !important; }
    .header-right .btn-header-deposit { height: 30px; min-height: 30px; padding: 0 8px !important; font-size: 11px !important; }
    .wallet-balance-label { font-size: 9px; }
    .wallet-balance-amount { font-size: 12px; }
    .header-account-btn { width: 36px; height: 36px; }
}
@media (max-width: 360px) {
    header.top-header { gap: 5px !important; padding: 0 10px !important; }
    .header-right { gap: 4px; }
    .header-right .wallet-pill { max-width: 138px; min-height: 34px; }
    .header-right .wallet-balance-box { padding: 0 5px !important; }
    .header-right .btn-header-deposit { padding: 0 6px !important; font-size: 10px !important; }
    .header-account-btn { width: 32px; height: 34px; }
    .wallet-balance-label { display: none; }
    .wallet-balance-amount { font-size: 10px; }
}

/* Final desktop sizes from plixwin-navigation (1).html. */
@media (min-width: 901px) {
    header.top-header { gap: 14px !important; }
    .mobile-menu-toggle { display: none !important; }
    .brand-logo-wrap { margin-right: 6px; }
    .brand-logo-img { width: 74px !important; max-width: 74px !important; height: auto !important; }
    .top-nav-tabs { height: 44px; padding: 4px !important; gap: 2px !important; border-radius: 12px !important; }
    .top-tab-item { height: 34px !important; min-height: 34px !important; padding: 0 13px !important; gap: 8px !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 600 !important; }
    .top-tab-item.active { font-weight: 600 !important; }
    .top-tab-item .nav-tab-ico { width: 18px !important; height: 18px !important; }
    .header-right { gap: 14px; }
    .header-right .wallet-pill { height: 40px; min-height: 40px; border-radius: 10px; }
    .header-right .wallet-balance-box { padding: 0 12px !important; }
    .header-right .btn-header-deposit { height: 32px; min-height: 32px; border-radius: 8px; }
    .wallet-balance-label { font-size: 11px; }
    .header-notification-btn, .header-account-btn { border-radius: 10px; }
}

/* The sample shows the same account icon for guests and signed-in players. */
.has-player .header-account-btn { display: grid; }
.header-right .user-profile-pill { display: none !important; }

@media (min-width: 901px) and (max-width: 1000px) {
    .top-tab-item { padding: 0 9px !important; gap: 6px !important; font-size: 12px !important; }
    .top-tab-item .nav-tab-ico { width: 17px !important; height: 17px !important; }
    .header-right { gap: 6px; }
    .header-right .wallet-balance-box { padding: 0 7px !important; }
}