/* Desktop layout (>=1024px). Phones never match, so the mobile site is untouched.
   Loaded last, so it also out-ranks the old 600px desktop column in theme-sun.css. */
@media (min-width: 1024px) {
    :root { --dk-rail: 220px; --dk-head: 56px; --dk-max: 1180px; }

    /* Bottom nav becomes a left rail. */
    #bottom-nav {
        top: var(--dk-head) !important; bottom: 0 !important; left: 0 !important; right: auto !important;
        width: var(--dk-rail) !important; height: auto !important;
        border-top: 0 !important; border-right: 1px solid rgba(255, 255, 255, .07) !important;
        background: #0d0f13 !important; box-shadow: none !important;
        padding: 18px 12px !important;
    }
    #bottom-nav #nav-icons-container {
        flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important;
        gap: 4px; height: auto !important; padding: 0 !important; background: none !important;
    }
    #bottom-nav .nav-item {
        flex: none !important; width: 100% !important; height: 48px !important; min-height: 0 !important;
        flex-direction: row !important; justify-content: flex-start !important; align-items: center !important;
        gap: 14px; padding: 0 16px !important; margin: 0 !important; border-radius: 10px;
        transform: none !important; background: none !important; box-shadow: none !important;
    }
    #bottom-nav .nav-item > *:not(.nav-label) { transform: none !important; margin: 0 !important; flex: none; }
    #bottom-nav .nav-item svg, #bottom-nav .nav-item img, #bottom-nav .nav-item i { width: 24px !important; height: 24px !important; font-size: 20px !important; }
    #bottom-nav .nav-item .nav-label {
        position: static !important; transform: none !important; margin: 0 !important; flex: 1;
        font-size: 14px !important; line-height: 1 !important; font-weight: 600 !important; text-align: left !important;
        letter-spacing: .02em; text-transform: none !important; white-space: nowrap;
    }
    #bottom-nav .nav-item:hover { background: rgba(255, 255, 255, .05) !important; }
    #bottom-nav .nav-item.active-nav { background: rgba(245, 197, 66, .12) !important; }
    #bottom-nav .nav-item.active-nav::before, #bottom-nav .nav-item.active-nav::after, #bottom-nav .nav-indicator { display: none !important; }
    #safe-area-spacer { display: none !important; }

    /* Content sits right of the rail and grows to a desktop width. */
    #scroll-content { left: var(--dk-rail) !important; right: 0 !important; bottom: 0 !important; width: auto !important; background: #0c0d10 !important; }
    #app-main {
        max-width: var(--dk-max) !important; padding: 20px 28px 40px !important;
        border: 0 !important; box-shadow: none !important; background: transparent !important;
    }
    #app-loading { left: var(--dk-rail) !important; }

    /* Home: banner beside the account card + live feed; referral under the banner. */
    #view-home.active { display: grid !important; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 20px; align-items: start; }
    #view-home > * { grid-column: 1 / -1; min-width: 0; }
    #view-home > #home-banner { grid-column: 1; grid-row: 1; border-radius: 14px; }
    #view-home > div:has(> #guest-info-card) { grid-column: 2; grid-row: 1; margin: 0 !important; align-self: stretch; display: flex; flex-direction: column; }
    #view-home > div:has(> #guest-info-card) > :is(#guest-info-card, #user-info-card):not(.hidden) { flex: 1; padding: 20px !important; }
    #view-home > div:has(> #guest-info-card) > #guest-info-card:not(.hidden) { display: flex; flex-direction: column; justify-content: center; }
    #view-home > #home-referral-program-wrapper { grid-column: 1; grid-row: 2; margin: 20px 0 0 !important; }
    #view-home > #live-feed-section { grid-column: 2; grid-row: 2; margin: 20px 0 0 !important; }
    #view-home > #home-custom-banners:empty { display: none; }
    #view-home > [class*="px-4"],
    #view-home > #aristocrat-section > [class*="px-4"],
    #view-home > #big-wins-section .bw-head, #view-home > #big-wins-section .bw-row,
    #view-home > #big-wins-section { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }

    /* All Games: the provider shortcut row uses the full width. */
    #aristocrat-section .pokies-shortcut-viewport { max-width: none !important; flex: 1; }

    /* Game grid: 3 per row on phones, ~7 on desktop. */
    #pokies-games-grid .s96-ll-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 14px !important; }
    #pokies-games-grid .pokies-card { transition: transform .15s ease; }
    #pokies-games-grid .pokies-card:hover { transform: translateY(-3px); }

    /* Footer columns spread out. */
    #view-home .s96-ft-cols { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* No bottom nav to clear any more. */
    #floating-support-widget { bottom: 24px !important; }
}

/* ---- Desktop chrome added by desktop.js (hidden on phones). ---- */
#dk-head-acts, #dk-rail-extra, .dk-welcome { display: none; }
@media (min-width: 1024px) {
    /* Header: full width, no hamburger (the rail replaces it), wallet + actions on the right. */
    #app-header > div { max-width: none !important; padding: 0 24px 0 20px !important; height: var(--dk-head); }
    #app-header button[onclick="toggleSideMenu()"] { display: none !important; }
    #dk-head-acts { display: flex; align-items: center; gap: 10px; margin-right: 6px; }
    #dk-head-acts .dk-user { display: none; }
    html.dk-auth #dk-head-acts .dk-guest { display: none; }
    html.dk-auth #dk-head-acts .dk-user { display: flex; }
    #dk-head-acts .dk-guest, #dk-head-acts .dk-user { align-items: center; gap: 10px; }
    .dk-btn {
        height: 38px; padding: 0 20px; border-radius: 9px; font-weight: 800; font-size: 13px;
        letter-spacing: .04em; text-transform: uppercase; transition: filter .15s, background .15s;
    }
    .dk-btn-gold { background: linear-gradient(180deg, #ffd84a, #e9a90f); color: #1a1205; box-shadow: 0 2px 10px rgba(245, 180, 20, .25); }
    .dk-btn-gold:hover { filter: brightness(1.08); }
    .dk-btn-ghost { color: #f5d36b; border: 1px solid rgba(245, 197, 66, .45); background: rgba(245, 197, 66, .06); }
    .dk-btn-ghost:hover { background: rgba(245, 197, 66, .14); }
    .dk-wallet {
        display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
        height: 38px; padding: 0 14px; border-radius: 9px; background: #16191f; border: 1px solid rgba(255, 255, 255, .08);
        line-height: 1.1;
    }
    .dk-wallet-label { font-size: 10px; color: #8a8f99; text-transform: uppercase; letter-spacing: .08em; }
    .dk-wallet-amt { font-size: 15px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
    .dk-avatar {
        width: 38px; height: 38px; border-radius: 50%; background: #16191f; border: 1px solid rgba(245, 197, 66, .4);
        color: #f5d36b; display: grid; place-items: center; font-size: 15px;
    }

    /* Rail: extra links under the main five, chat + language pinned to the bottom. */
    #bottom-nav { display: flex !important; flex-direction: column !important; }
    #dk-rail-extra { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
    .dk-rail-sep { height: 1px; background: rgba(255, 255, 255, .07); margin: 12px 8px; }
    .dk-rail-link {
        display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-radius: 10px;
        color: #a9adb6; font-size: 14px; font-weight: 600; text-align: left;
    }
    .dk-rail-link i { width: 24px; text-align: center; font-size: 17px; color: #8a8f99; }
    .dk-rail-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
    .dk-rail-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: 2px; }

    /* Wallet card (right of the banner): real hierarchy instead of 9px phone text. */
    #view-home :is(#guest-info-card, #user-info-card > div) {
        background: linear-gradient(160deg, #1a1d24, #111318) !important;
        border: 1px solid rgba(245, 197, 66, .22) !important; border-radius: 16px !important;
    }
    #user-info-card:not(.hidden) { display: flex; }
    #user-info-card > div { flex: 1; padding: 22px !important; display: flex; flex-direction: column; }
    #view-home :is(#guest-info-card, #user-info-card) .flex.items-center.gap-3 { flex-direction: column; align-items: stretch; gap: 16px; flex: 1; }
    #view-home :is(#guest-info-card, #user-info-card) .flex.flex-col.gap-1\.5 { flex-direction: row; gap: 8px; margin-top: auto; }
    #view-home :is(#guest-info-card, #user-info-card) .flex.flex-col.gap-1\.5 > button {
        flex: 1; height: 42px; padding: 0 !important; font-size: 11px !important; letter-spacing: .02em !important; border-radius: 9px !important;
    }
    #view-home :is(#guest-info-card, #user-info-card) .flex.flex-col.gap-1\.5 > button:first-child {
        background: linear-gradient(180deg, #ffd84a, #e9a90f) !important; color: #1a1205 !important; border: 0 !important;
    }
    #view-home :is(#guest-info-card, #user-info-card) p.text-lg { font-size: 30px !important; line-height: 1.15; margin: 2px 0 4px; }
    #view-home :is(#guest-info-card, #user-info-card) .text-\[10px\] { font-size: 12px !important; }
    #view-home :is(#guest-info-card, #user-info-card) .text-\[9px\] { font-size: 12px !important; line-height: 1.6; }
    #view-home :is(#guest-info-card, #user-info-card) .text-\[8px\] { font-size: 11px !important; }
    #view-home #user-card-name { font-size: 16px !important; }
    #view-home #user-card-vip { font-size: 10px !important; padding: 2px 8px !important; }
    #view-home #home-clear-balance-btn { align-self: flex-start; font-size: 11px !important; padding: 4px 10px !important; }
    /* Guest: welcome line + login/register; a 0.00 balance says nothing to a visitor. */
    #guest-info-card .dk-welcome { display: block; margin-bottom: 18px; }
    .dk-welcome-k { font-size: 13px; color: #8a8f99; }
    .dk-welcome-t { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: .01em; line-height: 1.2; }
    .dk-welcome-t span { color: #f5c542; }
    .dk-welcome-s { font-size: 13px; color: #a9adb6; margin-top: 4px; }
    #guest-info-card > .flex.items-center.gap-3 { display: none !important; }
    #guest-info-card > .flex.gap-2 { margin: 0 !important; gap: 10px !important; }
    #guest-info-card > .flex.gap-2 > button { height: 46px; padding: 0 !important; border-radius: 10px !important; font-size: 14px !important; }
    #guest-info-card > .flex.gap-2 > button:last-child { background: linear-gradient(180deg, #ffd84a, #e9a90f) !important; color: #1a1205 !important; border: 0 !important; }

    /* Big Wins left, Trusted Partner right: no half-empty rows. */
    #view-home > #trusted-partner-section { grid-column: 2; grid-row: 3; margin: 32px 0 0 !important; }
    #view-home > #big-wins-section { grid-column: 1; grid-row: 3; margin-top: 32px !important; }
    #view-home > #trusted-partner-section .s96-rail { overflow: visible !important; padding: 0 !important; gap: 10px !important; }
    #view-home > #trusted-partner-section .s96-trust-card { width: calc((100% - 20px) / 3) !important; }

    #view-home > #popular-provider-section, #view-home > #hot-games-section, #view-home > #aristocrat-section { margin-top: 32px !important; }
}
@media (min-width: 1024px) {
    /* Logged-in card must fit beside the banner: limits live on the deposit page anyway. */
    #user-info-card :is(.js-min-deposit, .js-min-withdraw) { display: none !important; }
    #user-info-card > div { padding: 18px 20px !important; }
    #user-info-card > div > .flex.items-center.gap-2.mb-2 { margin-bottom: 4px !important; }
    #view-home #user-info-card .flex.items-center.gap-3 { gap: 10px !important; }
    #view-home #user-info-card p.text-lg { font-size: 26px !important; margin: 0 0 2px; }
    #view-home #user-info-card .flex.flex-col.gap-1\.5 > button { height: 40px; }
    #view-home #home-clear-balance-btn { margin-top: 8px !important; }
}
@media (min-width: 1024px) {
    #view-home #user-info-card.user-card-wrapper { margin: 0 !important; padding: 0 !important; }
}
@media (min-width: 1024px) {
    #view-home > div:has(> #guest-info-card) > #user-info-card:not(.hidden) { padding: 0 !important; }
    #user-info-card > div { padding: 16px 20px !important; }
    #view-home #home-clear-balance-btn { margin-top: 6px !important; }
}
@media (min-width: 1024px) {
    /* Every shortcut fits on one row here, so the phone's scroll hints only cover the first tab. */
    #aristocrat-section .pokies-slide-hint { display: none !important; }
    /* Keep a gutter for the floating support button so it never sits on a "View All". */
    #scroll-content { padding-right: 64px !important; }
}

/* ---- Phase 2: inner pages. Three widths instead of one per page:
   forms 720px, lists and account 880px, browse pages (home, promo, VIP) full. ---- */
@media (min-width: 1024px) {
    /* Deposit: a form reads best at form width, not 1000px of stretched fields. */
    #view-deposit.active > * { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }

    /* Instant Rebate: drop the 460px phone panel and its grey slab. */
    #view-instant-rebate.active { max-width: 720px !important; background: transparent !important; min-height: 0 !important; padding: 8px 0 40px !important; }
    #view-instant-rebate .irb-tab { height: 44px; font-size: 14px; }

    /* Records: wider list, same structure. */
    #view-history #ax-root { max-width: 880px !important; }

    /* Account: wallet across the top, VIP and Refer side by side, menu below. */
    #view-setting.ac-page.active {
        display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px;
        max-width: 880px !important; margin: 0 auto !important; align-items: stretch;
    }
    #view-setting.ac-page > * { grid-column: 1 / -1; min-width: 0; }
    #view-setting.ac-page > .ac-vip { grid-column: 1; }
    #view-setting.ac-page > .ac-ref { grid-column: 2; }
    #view-setting.ac-page > :is(.ac-vip, .ac-ref) { display: flex; flex-direction: column; }
    #view-setting.ac-page > .ac-vip > .ac-perks { margin-top: auto; }

    /* Promo: offers big enough to read; the two entry banners share a row. */
    #view-promo.active > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 20px !important; }
    #view-promo.active > div:first-child > a { margin: 0 !important; }
    #view-promo.active > div:first-child > :not(a) { grid-column: 1 / -1; }
    #promo-bonus-list > div { gap: 14px !important; margin-bottom: 32px !important; }
    #promo-bonus-list .bonus-card { width: 150px !important; height: auto !important; min-width: 150px !important; transition: transform .15s ease; }
    #promo-bonus-list .bonus-card:hover { transform: translateY(-3px); }
    #promo-bonus-list > h2 { font-size: 15px !important; margin-bottom: 14px !important; }

    /* VIP: the rail already gets you back, so no back arrow; levels two to a row. */
    #view-vip .vip-back-btn { display: none !important; }
    #view-vip .vip-page-header { grid-template-columns: minmax(0, 1fr) 36px !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 2px !important; padding-right: 2px !important; }
    #view-vip #vip-level-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #view-vip .vipx-how { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
}
@media (min-width: 1024px) {
    /* Every provider's game list, not just Lightning Link's: the others render a plain
       grid-cols-3, which on a desktop-width column made each card ~355px wide. */
    #pokies-games-grid .grid.grid-cols-3,
    #provider-games-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 14px !important; }
    /* Live / Sports brand tiles are tall portraits; a little wider reads better. */
    #pokies-games-grid .grid.grid-cols-3:has(> .s96-brand-tile) { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
    #pokies-games-grid .pokies-card, #provider-games-grid > * { transition: transform .15s ease; }
    #pokies-games-grid .pokies-card:hover, #provider-games-grid > *:hover { transform: translateY(-3px); }
}
@media (min-width: 1024px) {
    /* Pokies tab: provider cards (grid-cols-4 on phones) were ~335px wide on desktop. */
    #providers-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 14px !important; padding-left: 0 !important; padding-right: 0 !important; }
    #providers-grid > .provider-card { transition: transform .15s ease; }
    #providers-grid > .provider-card:hover { transform: translateY(-3px); }
}
@media (min-width: 1024px) {
    /* Partnership hero art was 950x380, most of the first screen. */
    .s96-partnership-hero { text-align: center; }
    .s96-partnership-hero > img { max-height: 240px !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; display: block; }
}