/* Desktop home refresh. The media guard also protects mobile if this file is
   bundled or included without the link element's media attribute. */
@media (min-width: 1024px) {
  /* Keep wallet forms readable instead of stretching across the storefront. */
  #walletScreen { max-width: 1060px !important; }
  #walletScreen .profile-layout-container { align-items: start !important; }
  #walletScreen .wallet-main-content { width: 100%; min-width: 0; }
  #walletScreen .wallet-hero-card { padding: 24px; margin-bottom: 20px; border-radius: 18px; }
  #walletScreen .wallet-hero-actions { justify-content: flex-start; gap: 12px; }
  #walletScreen .wallet-hero-btn { flex: 0 1 auto; min-width: 148px; height: 42px; padding-inline: 24px; border-radius: 11px; }
  #walletScreen .wallet-tabs-bar { margin-bottom: 16px; }
  #walletScreen .wallet-tab-item { height: 38px; font-size: 13px; }
  #walletScreen .wallet-view-pane { padding: 24px; border-radius: 18px; }

  /* Desktop account surfaces share the storefront's spacing and neutral palette. */
  #authScreen.auth-screen:not([style*="display: none"]) {
    min-height: calc(100dvh - 80px) !important;
    padding: 32px 24px !important;
    justify-content: flex-start !important;
    background: #f6f6f2 !important;
  }
  #authScreen .auth-ios-container {
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 24px 36px 28px !important;
    border: 1px solid #e6e8df;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 40px #26302008;
  }
  #authScreen .auth-ios-nav-bar { height: 30px; }
  #authScreen .auth-ios-hero { margin: 0 0 20px; }
  #authScreen .auth-ios-large-title { font-size: 30px; letter-spacing: -1px; line-height: 1.2; }
  #authScreen .auth-ios-subtitle { font-size: 14px; line-height: 1.6; }
  #authScreen .auth-ios-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #authScreen .auth-ios-form > * { min-width: 0; }
  #authScreen .auth-field-group:not([style*="display: none"]) { display: flex !important; flex-direction: column; gap: 0; margin: 0; }
  #authScreen .auth-field-header { min-height: 18px; margin-bottom: 7px; }
  #authScreen .auth-field-header .auth-field-label { margin: 0; }
  #authScreen .auth-ios-form > :not(.auth-field-group),
  #authScreen #authPhoneGroup { grid-column: 1 / -1; }
  #authScreen .auth-ios-form:has(#authUsernameGroup[style*="display: none"]) > .auth-field-group { grid-column: 1 / -1; }
  #authScreen .auth-field-label { font-size: 13px; line-height: 18px; margin-bottom: 7px; }
  #authScreen .auth-ios-input { min-height: 46px; font-size: 14px; background: #fafbf8; border-color: #e1e5d9; }
  #authScreen .auth-ios-google-btn, #authScreen .auth-ios-segmented { min-height: 46px; }
  #authScreen .auth-ios-submit-btn { min-height: 48px; background: #e94c2c; box-shadow: none; border-radius: 10px; font-size: 15px; }
  #authScreen .auth-ios-footer { margin-top: 20px; font-size: 13px; }

  :is(#profileScreen, #fairScreen) { max-width: 1220px !important; padding: 32px 28px 56px !important; }
  :is(#profileScreen, #fairScreen) .profile-layout-container { gap: 32px !important; align-items: flex-start !important; }
  :is(#profileScreen, #fairScreen) .account-sidebar-slot { width: 220px !important; }
  :is(#profileScreen, #fairScreen) .profile-desktop-sidebar { width: 220px !important; top: 104px !important; padding: 16px 12px; box-sizing: border-box; background: #f3f4ef; border: 1px solid #e8eadf; border-radius: 16px; }
  :is(#profileScreen, #fairScreen) .profile-sidebar-item { min-height: 42px; font-size: 14px !important; }
  :is(#profileScreen, #fairScreen) .profile-sidebar-item.active { background: #fff !important; border-color: #e5e8dc !important; }
  :is(#profileScreen, #fairScreen) .profile-main-content { flex: 1; gap: 20px !important; }
  :is(#profileScreen, #fairScreen) .profile-desktop-header { margin: 0 0 4px !important; }
  :is(#profileScreen, #fairScreen) .profile-desktop-title { font-size: 30px !important; letter-spacing: -1px; }
  :is(#profileScreen, #fairScreen) .profile-desktop-sub { font-size: 14px !important; line-height: 1.6; max-width: 620px; }
  #profileScreen .app-install-card { margin-bottom: 28px; padding: 16px 20px; border-radius: 14px; box-shadow: none; }
  #profileScreen .profile-welcome-card { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px; background: #fff7f1; border-color: #f3e3d7; box-shadow: none; border-radius: 16px; }
  #profileScreen:has(#profileSignedOutView:not([style*="display: none"])) .profile-account-id-badge { display: none !important; }
  #profileScreen .profile-signin-orange-btn { width: auto; min-height: 44px; padding: 0 20px; flex-shrink: 0; font-size: 14px; border-radius: 10px; box-shadow: none; background: #e94c2c; }
  #profileScreen .profile-list-card { border-radius: 16px; border-color: #e6e9df; box-shadow: none; }
  #profileScreen .profile-list-row { min-height: 74px; padding: 16px 20px; }
  #profileScreen .profile-section-label { margin: 24px 0 10px; font-size: 11px; letter-spacing: 1.1px; color: #767d6a; }

  #fairScreen .fair-hero-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 28px; border: 1px solid #e6e9df; border-radius: 18px; box-shadow: none; }
  #fairScreen .fair-hero-card > :not(label) { grid-column: 1 / -1; min-width: 0; }
  #fairScreen .fair-hero-card > label { min-width: 0; margin: 0; font-size: 13px; color: #383f30; }
  #fairScreen .fair-hero-card > label:has(#fairDrawHistory) { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid #e8ebe2; }
  #fairScreen .fair-description { font-size: 14px; line-height: 1.7; margin: 0; color: #6b7260; }
  #fairScreen .fair-field-group { margin: 0; }
  #fairScreen .fair-field-label { display: block; font-size: 11px; letter-spacing: .6px; margin-bottom: 6px; }
  #fairScreen .fair-field-box { min-height: 44px; padding: 10px 12px; background: #f8f9f5; border-color: #e2e6d9; border-radius: 9px; box-sizing: border-box; }
  #fairScreen .fair-field-val { font-size: 12px; overflow-wrap: anywhere; }
  #fairScreen #fairRotateSeed { justify-self: start; font-size: 12px; padding: 0; }
  #fairScreen #fairRetiredSeed:empty, #fairScreen #fairVerifyResult:empty { display: none; }
  #fairScreen .fair-calc-btn { min-height: 46px; margin: 4px 0 0; border-radius: 10px; box-shadow: none; background: #e94c2c; font-size: 14px; }
  #fairScreen .faq-title { font-size: 20px; font-weight: 700; }
  .desktop-header :is(button, a):focus:not(:focus-visible) { outline: none !important; }
}

/* Shared desktop composition. Keep these rules behind the desktop breakpoint. */
@media (min-width: 1024px) {
  main.app { padding-top: 80px !important; padding-bottom: 48px !important; }
  :root #desktopHeader { height: 80px !important; background: #fffffffa !important; border-bottom: 1px solid #e8ebee !important; box-shadow: 0 2px 12px #17212f03 !important; }
  :root #desktopHeader .desktop-header-inner { width: calc(100% - 64px) !important; max-width: 1240px !important; height: 80px !important; padding: 0 !important; gap: 20px !important; box-sizing: border-box; }
  :root #desktopHeader .desktop-header-left { gap: 26px !important; min-width: 0; }
  :root #desktopHeader .desktop-header-right { gap: 8px !important; flex-shrink: 0; }
  :root #desktopHeader .desktop-nav { gap: 4px !important; }
  :root #desktopHeader .desktop-nav-link { min-height: 42px; padding: 10px 13px !important; font-size: 13px !important; border-radius: 10px !important; }
  :root #desktopHeader .desktop-logo { height: 30px !important; }
  :root #desktopHeader :is(.desktop-deposit-btn,.desktop-profile-btn,.desktop-balance-btn,.desktop-signin-btn,.desktop-register-btn) { min-height: 42px; font-size: 13px !important; border-radius: 10px !important; white-space: nowrap; }

  :root #homeScreen, :root #packsScreen, :root #appleScreen {
    width: calc(100% - 64px) !important; max-width: 1240px !important;
    margin: 0 auto !important; padding: 32px 0 56px !important; box-sizing: border-box;
  }
  :is(:root #walletScreen,:root #profileScreen,:root #collectionScreen,:root #fairScreen) {
    width: calc(100% - 64px) !important; max-width: 1240px !important;
    padding: 32px 0 56px !important; margin: 0 auto !important;
  }
  :root #homeScreen .desktop-hero-card { min-height: 370px !important; padding: 38px 44px !important; gap: 40px !important; }
  :root #homeScreen .desktop-hero-title { font-size: clamp(40px,3.7vw,54px) !important; line-height: 1.06 !important; letter-spacing: -2px !important; }
  :root #homeScreen .desktop-hero-content { gap: 17px !important; }
  :root #homeScreen .desktop-hero-desc { max-width: 430px !important; font-size: 15px !important; line-height: 1.65 !important; }
  :root #homeScreen .desktop-hero-visual { min-height: 280px !important; }
  :root #homeScreen .hero-product-img { max-height: 280px !important; }
  :root #homeScreen .desktop-hero-note { font-size: 12px !important; line-height: 1.6; }
  :root #homeScreen .desktop-trust-strip { padding: 20px 24px !important; gap: 12px !important; }
  :root #homeScreen .trust-item { padding: 0 12px !important; }
  :root #homeDailyBanner { margin: 24px 0 32px !important; padding: 16px 20px !important; border-radius: 14px !important; box-shadow: none !important; }
  :root #homeScreen .featured-packs-section { margin-top: 0 !important; }
  :root #homeScreen .featured-packs-section h2, :root #packsScreen .packs-screen-title { font-size: 28px !important; line-height: 1.25 !important; letter-spacing: -.8px !important; margin-bottom: 0 !important; }
  :root #homeScreen .featured-packs-grid { margin-top: 22px !important; gap: 24px !important; }
  :root #homeScreen .desktop-how-it-works { margin-top: 52px !important; }
  :root #homeScreen .how-step-card { padding: 24px !important; border-radius: 16px !important; box-shadow: none !important; }

  :root #packsScreen { background: transparent !important; }
  :root #packsScreen .packs-screen-header { margin-bottom: 22px !important; }
  :root #packsScreen .home-search-wrap { max-width: 400px !important; margin: 0 0 18px !important; padding: 0 !important; }
  :root #packsScreen .home-search-bar { height: 46px !important; border-radius: 12px !important; box-shadow: none !important; border: 1px solid #e1e5eb !important; }
  :root #packsScreen .categories { margin: 0 0 26px !important; gap: 8px !important; flex-wrap: wrap; }
  :root #packsScreen .category { min-height: 40px !important; border-radius: 10px !important; box-shadow: none !important; }
  :root #packsScreenGrid { gap: 28px 20px !important; }
  /* Keep the original pack artwork and foil; enlarge desktop labels only. */
  :root :is(#homeScreen,#packsScreen) .pack-preview-btn { display: flex !important; }
  :root #homeScreen .pack:not(.is-vip-pack) .pack-title { font-size: 24px !important; line-height: 1.12 !important; padding-inline: 38px !important; white-space: normal; overflow-wrap: anywhere; }
  :root #packsScreen .pack:not(.is-vip-pack) .pack-title { font-size: 20px !important; line-height: 1.12 !important; padding-inline: 36px !important; white-space: normal; overflow-wrap: anywhere; }
  :root #homeScreen .view-all-packs-btn { min-height: 46px !important; margin-top: 28px !important; }

  :root #appleScreen .opening-stage-wrap { height: 300px !important; margin-bottom: 24px !important; border: 1px solid #e3e7ec !important; border-radius: 20px !important; box-shadow: 0 6px 24px #17212f04 !important; }
  :root #appleScreen #backButton { margin-bottom: 24px !important; border-radius: 10px !important; min-height: 42px; }
  :root #desktopOpeningToolbar { width: min(100%,760px) !important; max-width: 760px !important; margin: 0 auto 36px !important; padding: 14px !important; gap: 12px !important; border-radius: 16px !important; border: 1px solid #e3e7ec !important; box-shadow: 0 4px 16px #17212f04 !important; }
  :root #desktopOpeningToolbar :is(.open-button,.demo-button,.quantity-control) { min-height: 48px !important; border-radius: 11px !important; }
  :root #desktopOpeningToolbar .pack-setting-label { font-size: 11px !important; }
  :root #appleScreen .drops-section-header { margin: 0 0 22px !important; }
  :root #dropsGrid { gap: 16px !important; }
  :root #dropsGrid .drop-card { border: 1px solid #e5e9ef !important; border-radius: 14px !important; box-shadow: none !important; }
  :root #dropsGrid .drop-name { font-size: 13px !important; line-height: 1.4 !important; }

  :is(:root #walletScreen,:root #collectionScreen) .guest-feature-page { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 28px !important; border-radius: 18px !important; box-shadow: 0 3px 14px #17212f03 !important; }
  :is(:root #walletSignedOutView,:root #collectionSignedOutView):not([style*="display: none"]):not([hidden]) { display: grid !important; grid-template-columns: 220px minmax(0,1fr); gap: 24px; align-items: center; text-align: left; }
  :is(:root #walletScreen,:root #collectionScreen) .guest-hero-container { width: 100% !important; max-width: 220px !important; margin: 0 !important; }
  :is(:root #walletScreen,:root #collectionScreen) .guest-main-content { align-items: flex-start !important; margin: 0 !important; text-align: left !important; }
  :is(:root #walletScreen,:root #collectionScreen) .guest-page-title { font-size: 24px !important; line-height: 1.25 !important; }
  :is(:root #walletScreen,:root #collectionScreen) .guest-page-desc { font-size: 14px !important; line-height: 1.65 !important; }
  :is(:root #walletScreen,:root #collectionScreen) .guest-primary-btn { min-height: 46px !important; max-width: 320px !important; margin: 20px 0 0 !important; align-self: flex-start; border-radius: 11px !important; box-shadow: none !important; }
  :is(:root #walletScreen,:root #collectionScreen) .guest-benefits-section { grid-column: 1 / -1; width: 100%; margin-top: 0 !important; }
  :is(:root #walletScreen,:root #collectionScreen) .guest-benefits-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px !important; }
  :is(:root #walletScreen,:root #collectionScreen) .guest-benefit-card { padding: 16px !important; align-items: flex-start !important; flex-direction: column !important; gap: 12px !important; border-radius: 12px !important; }
  :is(:root #termsScreen,:root #privacyScreen,:root #refundScreen,:root #docsScreen) { max-width: 820px !important; margin: 0 auto !important; padding: 32px 24px 64px !important; box-sizing: border-box; }
  :is(:root #termsScreen,:root #privacyScreen,:root #refundScreen,:root #docsScreen) .legal-doc-body { font-size: 15px !important; line-height: 1.8 !important; }
  :root #authScreen .auth-ios-container { max-width: 520px !important; }
  :root :is(#walletScreen,#profileScreen,#collectionScreen,#fairScreen) .profile-layout-container { gap: 32px !important; align-items: flex-start !important; }
  :root :is(#walletScreen,#profileScreen,#collectionScreen,#fairScreen) .account-sidebar-slot { width: 220px !important; flex-shrink: 0; }
  :root :is(#walletScreen,#profileScreen,#collectionScreen,#fairScreen) .profile-desktop-sidebar { width: 220px !important; padding: 16px 12px; top: 104px !important; background: #fff; border: 1px solid #e3e7ec; border-radius: 16px; box-sizing: border-box; }
  :root :is(#walletScreen,#profileScreen,#collectionScreen,#fairScreen) .profile-sidebar-item { min-height: 42px; font-size: 14px !important; }
  :root :is(#walletScreen,#profileScreen,#collectionScreen,#fairScreen) .profile-desktop-title { font-size: 30px !important; line-height: 1.25; letter-spacing: -1px; }
  :is(:root #desktopHeader,:root #homeScreen,:root #packsScreen,:root #appleScreen) :is(button,a):focus-visible { outline: 3px solid #ef432366; outline-offset: 4px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  :root #desktopHeader .desktop-header-left { gap: 14px !important; }
  :root #desktopHeader .desktop-nav-link { padding-inline: 8px !important; font-size: 12px !important; }
  :root #desktopHeader .desktop-header-inner { width: calc(100% - 48px) !important; gap: 12px !important; }
  :root #desktopHeader .desktop-balance-btn { max-width: 104px !important; overflow: hidden; text-overflow: ellipsis; }
  :root #desktopHeader .desktop-profile-btn { padding-inline: 8px !important; }
}
@media (min-width: 1024px) {
  .home-screen {
    max-width: 1260px !important;
    padding: 32px 28px 72px !important;
  }

  #desktopNavSupport { display: none !important; }
  .app-global-toast { display: none !important; }
  .app { padding-top: 80px !important; }
  .desktop-header, .desktop-header-inner { height: 80px !important; }
  .desktop-header-inner { max-width: 1380px !important; padding-inline: 32px !important; gap: 20px !important; }
  .desktop-logo { height: 32px !important; }
  .desktop-header { background: #fff !important; box-shadow: none !important; border-bottom: 1px solid #ecece7 !important; }
  .desktop-header-left { gap: 30px !important; }
  .desktop-nav { gap: 4px !important; }
  .desktop-nav-link {
    position: relative;
    height: 44px !important;
    padding-inline: 14px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    background: transparent !important;
    color: #77796f !important;
    box-shadow: none !important;
  }
  .desktop-nav-link.active { background: #fff0e9 !important; color: #d94324 !important; }
  .desktop-nav-link.active::after { display: none !important; }
  .desktop-nav-link svg { width: 18px !important; height: 18px !important; }
  .desktop-nav-link:hover { color: #e44e30 !important; }
  .desktop-header-right { gap: 8px !important; }
  .desktop-header .desktop-icon-btn { border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 50% !important; color: #686d61; }
  .desktop-header .desktop-icon-btn:hover { background: #f3f4ef !important; }
  .desktop-header-divider { height: 20px !important; margin-inline: 4px !important; background: #e9ebe3 !important; }
  .desktop-header .desktop-balance-btn { height: 38px; background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; border-radius: 9px; font-size: 12px; color: #383e30; }
  .desktop-header .desktop-balance-btn:hover { background: #f5f6f2 !important; }
  .desktop-header .desktop-balance-btn img { width: 20px; height: 20px; flex-shrink: 0; filter: brightness(0); opacity: .7; }
  #desktopHeaderSoundBtn.is-muted .desktop-sound-waves { display: none; }
  #desktopHeaderSoundBtn.is-muted .desktop-sound-off { display: block !important; }
  #desktopHeaderSoundBtn,
  #desktopHeaderSoundBtn:hover,
  #desktopHeaderSoundBtn:active { background: transparent !important; border: none !important; box-shadow: none !important; transform: none !important; color: #60665a; }
  #desktopHeaderSoundBtn svg { stroke-width: 1.8; }
  .desktop-header .desktop-deposit-btn { height: 38px; padding-inline: 16px; background: #e44e30 !important; box-shadow: none !important; border-radius: 9px; font-size: 12px; }
  .desktop-header .desktop-deposit-btn:hover { background: #c93f24 !important; }
  .desktop-header .desktop-profile-btn { height: 38px; border: 1px solid #e8ebe1 !important; box-shadow: none !important; border-radius: 9px; font-size: 12px; padding-right: 12px; }
  .desktop-header .desktop-profile-btn::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid #858b7c; border-bottom: 1.5px solid #858b7c; transform: rotate(45deg); margin: -3px 0 0 4px; }
  .desktop-header :is(button, a):focus-visible { outline: 2px solid #e44e30 !important; outline-offset: 3px !important; }
  .desktop-guest-actions,
  .desktop-member-actions { display: inline-flex; align-items: center; gap: 8px !important; }
  .desktop-header .desktop-signin-btn { height: 38px; padding-inline: 16px; background: #ffffff !important; border: 1px solid #e8ebe1 !important; box-shadow: none !important; border-radius: 9px; font-size: 12px; font-weight: 600; color: #383e30; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; }
  .desktop-header .desktop-signin-btn:hover { background: #f5f6f2 !important; border-color: #d1d5db !important; color: #e44e30 !important; }
  .desktop-header .desktop-register-btn { height: 38px; padding-inline: 18px; background: #e44e30 !important; box-shadow: none !important; border: none !important; border-radius: 9px; font-size: 12px; font-weight: 700; color: #ffffff !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; }
  .desktop-header .desktop-register-btn:hover { background: #c93f24 !important; }
  .desktop-header .desktop-register-btn:active,
  .desktop-header .desktop-signin-btn:active { transform: scale(0.97); }
  .desktop-header :is(.desktop-balance-btn, .desktop-deposit-btn, .desktop-profile-btn, .desktop-signin-btn, .desktop-register-btn) { height: 44px !important; font-size: 14px !important; border-radius: 11px !important; }
  .desktop-header .desktop-icon-btn { width: 40px; height: 44px; }
  .desktop-header .desktop-icon-btn svg { width: 20px; height: 20px; }
  .desktop-profile-avatar { width: 30px !important; height: 30px !important; }

  .home-screen .desktop-home-hero { gap: 0 !important; margin-bottom: 24px !important; }
  .home-screen .desktop-hero-card {
    min-height: 414px !important;
    padding: 40px 48px !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 24px !important;
    border: 1px solid #e9e4dd !important;
    border-radius: 24px 24px 0 0 !important;
    background: #f5f2ec !important;
    box-shadow: none !important;
  }
  .home-screen .desktop-hero-card::before,
  .home-screen .desktop-hero-card::after { display: none !important; }
  .home-screen .desktop-hero-content { gap: 20px !important; position: relative; z-index: 2; }
  .home-screen .desktop-hero-badge {
    align-self: flex-start;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #69675f !important;
    font-size: 10px !important;
    letter-spacing: 1.8px !important;
    font-weight: 700 !important;
  }
  .home-screen .desktop-badge-dot { background: #e65335 !important; box-shadow: none !important; }
  .home-screen .desktop-hero-title {
    font-size: clamp(40px, 4.15vw, 60px) !important;
    line-height: 1.04 !important;
    font-weight: 750 !important;
    letter-spacing: -3px !important;
    color: #242720 !important;
  }
  .home-screen .desktop-hero-title .highlight-text {
    background: none !important;
    color: #df4d2e !important;
    -webkit-text-fill-color: #df4d2e !important;
  }
  .home-screen .desktop-hero-desc { max-width: 385px !important; color: #75756d !important; font-size: 14px !important; line-height: 1.7 !important; }
  .home-screen .desktop-hero-actions { margin-top: 0 !important; }
  .home-screen .desktop-hero-primary-btn {
    height: 48px !important;
    padding-inline: 22px !important;
    border-radius: 9px !important;
    background: #e44e30 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    gap: 24px !important;
  }
  .home-screen .desktop-hero-primary-btn:hover { background: #c93f24 !important; }
  .home-screen .desktop-hero-note { margin: -5px 0 0; color: #85867c; font-size: 11px; line-height: 1.6; }

  .home-screen .desktop-hero-visual {
    min-height: 380px !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  .home-screen .desktop-showcase-label {
    display: none;
  }
  .home-screen .hero-showcase-stage { height: 365px !important; }
  .home-screen .hero-product-img { max-height: 365px !important; max-width: 100% !important; filter: drop-shadow(0 20px 16px #5a41232b) !important; }
  .home-screen .hero-showcase-dots { gap: 9px !important; margin-top: 4px !important; }
  .home-screen .hero-dot-btn { background: #b7aa94 !important; width: 6px !important; height: 6px !important; }
  .home-screen .hero-dot-btn.active { width: 22px !important; background: #4e5145 !important; box-shadow: none !important; }

  .home-screen .desktop-trust-strip {
    padding: 20px 24px !important;
    box-sizing: border-box;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #e9e4dd;
    border-top: none;
    border-radius: 0 0 18px 18px;
  }
  .home-screen .trust-item {
    padding: 0 20px !important;
    border: none !important;
    border-right: 1px solid #eeece7 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 12px !important;
  }
  .home-screen .trust-item:last-child { border-right: none !important; }
  .home-screen .trust-icon-box { width: 28px !important; height: 32px !important; background: transparent !important; }
  .home-screen .trust-icon-box svg { stroke: #777c68 !important; }
  .home-screen .trust-text strong { font-size: 12px !important; color: #3c4034 !important; }
  .home-screen .trust-text span { font-size: 10px !important; line-height: 1.5; color: #8b8d83 !important; }

  .home-screen .daily-reward-banner {
    margin-bottom: 32px !important;
    padding: 12px 20px !important;
    border: 1px solid #e7e9df !important;
    border-radius: 12px !important;
    background: #f1f3eb !important;
    box-shadow: none !important;
  }
  .home-screen .featured-packs-header { align-items: flex-start !important; text-align: left !important; padding-bottom: 20px !important; }
  .home-screen .featured-packs-title { font-size: 26px !important; letter-spacing: -1px !important; font-weight: 750 !important; text-align: left !important; }
  .home-screen .featured-packs-grid { gap: 20px !important; }
  .home-screen .view-all-packs-btn { background: #fff !important; color: #373c2e !important; border: 1px solid #d8dccf !important; box-shadow: none !important; border-radius: 9px !important; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .desktop-header-inner { padding-inline: 24px !important; gap: 12px !important; }
  .desktop-header-left { gap: 18px !important; }
  .desktop-header-right { gap: 6px !important; }
  .desktop-nav { gap: 0 !important; }
  .desktop-nav-link { gap: 5px !important; padding-inline: 8px !important; font-size: 13px !important; }
  .desktop-logo { height: 28px !important; }
  .desktop-header :is(.desktop-balance-btn, .desktop-deposit-btn, .desktop-profile-btn, .desktop-signin-btn, .desktop-register-btn) { font-size: 12px !important; }
  .desktop-balance-btn { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 10px !important; }
  .desktop-icon-btn { width: 32px !important; height: 34px !important; }
  .home-screen .desktop-hero-card { padding: 32px !important; gap: 18px !important; }
  .home-screen .trust-item { padding-inline: 12px !important; }
  .home-screen .desktop-trust-strip { padding-inline: 12px !important; }
}

/* Airy desktop collection showcase */
@media(min-width:1024px){
 :root #homeScreen .desktop-home-hero{background:#fff;border:1px solid #eeeae5;border-radius:24px;overflow:hidden;box-shadow:none;margin-bottom:28px!important}
 :root #homeScreen .desktop-hero-card{display:flex!important;flex-direction:column-reverse!important;justify-content:center!important;gap:40px!important;padding:48px 48px 52px!important;min-height:0!important;background:radial-gradient(ellipse at 50% 28%,#fff4e9, #fff 65%)!important;border:0!important;border-radius:0!important}
 :root #homeScreen .desktop-hero-content{width:100%!important;max-width:850px!important;align-items:center!important;text-align:center;gap:20px!important;flex:none!important}
 :root #homeScreen .desktop-hero-title{font-size:clamp(36px,3.5vw,48px)!important;letter-spacing:-1.8px!important;line-height:1.15!important;color:#282c26!important;margin:0!important}
 :root #homeScreen .highlight-text{color:#ed4b29!important}
 :root #homeScreen .desktop-hero-desc{font-size:16px!important;line-height:1.6!important;max-width:540px!important;color:#73776f!important;margin:0!important}
 :root #homeScreen .desktop-hero-actions{justify-content:center!important;margin:4px 0 0!important}
 :root #homeScreen .desktop-hero-primary-btn{background:#ef4b29!important;border-radius:10px!important;box-shadow:none!important;min-height:48px;transition:transform .25s}
 :root #homeScreen .desktop-hero-primary-btn:hover{transform:translateY(-2px)}
 :root #homeScreen .desktop-hero-visual{width:100%!important;max-width:740px!important;min-height:230px!important;height:230px!important;position:relative!important;flex:none!important;display:block!important;overflow:visible!important}
 .hero-pack-fan{height:100%;display:flex;align-items:center;justify-content:center;gap:64px;margin:auto}
 .hero-floating-pack{display:block;width:160px;flex:0 0 160px;text-decoration:none;animation:collection-float 6s ease-in-out infinite;animation-delay:var(--delay);border:0;background:transparent;box-shadow:none}
 .hero-floating-pack img{display:block;width:160px;height:180px;object-fit:contain;filter:drop-shadow(0 12px 12px #47332712);transition:transform .3s}
 .hero-floating-pack span{display:flex;justify-content:center;gap:12px;color:#52584e;font-size:12px;margin-top:20px}
 .hero-floating-pack b{color:#a3a79e;font-weight:400}
 .hero-floating-pack:hover img,.hero-floating-pack:focus-visible img{transform:translateY(-5px) scale(1.04)}
 :root #homeScreen .desktop-trust-strip{background:#fff!important;border:0!important;border-top:1px solid #eeece7!important;border-radius:0!important;padding:20px 24px!important}
 :root #homeScreen .trust-item{background:transparent!important;box-shadow:none!important;border-color:#eeece7!important}
 :root #homeScreen .trust-text strong{color:#363c31!important;font-size:12px!important}
 :root #homeScreen .trust-text span{color:#7d8278!important}
 :root #homeScreen .trust-icon-box{background:transparent!important}
 :root #homeScreen .featured-packs-grid{gap:28px!important}
 @keyframes collection-float{0%,100%{transform:translateY(5px) rotate(calc(var(--slot)*5deg))}50%{transform:translateY(-9px) rotate(calc(var(--slot)*5deg + 2deg))}}
 @media(prefers-reduced-motion:reduce){.hero-floating-pack{animation:none}.hero-floating-pack img{transition:none}}
}

@media(min-width:1024px){
 :root #homeScreen .hero-floating-pack{width:150px;flex-basis:150px;will-change:transform}
 :root #homeScreen .hero-floating-pack .pack-card{width:150px;aspect-ratio:143/225;border-radius:15px}
 :root #homeScreen .hero-floating-pack.pack:not(.is-vip-pack) .pack-title{font-size:16px!important;padding:8px 6px 4px!important;white-space:nowrap!important;line-height:1.15!important}
 :root #homeScreen .hero-floating-pack .pack-image img{width:auto;height:auto;max-width:90%;max-height:94%;filter:drop-shadow(0 5px 5px #0002)}
 :root #homeScreen .hero-floating-pack:hover,:root #homeScreen .hero-floating-pack:focus-visible{animation-play-state:paused}
 :root #homeScreen .hero-floating-pack:hover .pack-card{transform:translateY(-5px);box-shadow:0 18px 32px #38291420}
 :root #homeScreen .hero-floating-pack:hover img{transform:none}
 @media(prefers-reduced-motion:reduce){:root #homeScreen .hero-floating-pack{animation:none;will-change:auto}:root #homeScreen .hero-floating-pack .pack-card{transition:none}}
}

/* Continuous left-to-right arc, with space between the full-size packs. */
@media(min-width:1024px){
 :root #homeScreen .desktop-hero-card{padding:24px 0 48px!important;gap:28px!important}
 :root #homeScreen .desktop-hero-content{padding-inline:32px;box-sizing:border-box}
 :root #homeScreen .desktop-hero-visual{max-width:100%!important;width:100%!important;height:370px!important;min-height:370px!important;overflow:hidden!important;container-type:inline-size;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
 .hero-pack-fan{position:relative;display:block;width:100%;height:100%}
 :root #homeScreen .hero-floating-pack{position:absolute;top:0;left:0;width:190px;display:block;animation:pack-arc 40s linear infinite;animation-delay:var(--delay);will-change:transform}
 :root #homeScreen .hero-floating-pack .pack-card{width:190px;aspect-ratio:143/225}
 :root #homeScreen .hero-floating-pack.pack:not(.is-vip-pack) .pack-title{font-size:18px!important}
 :root #homeScreen .hero-pack-fan:has(.hero-floating-pack:hover) .hero-floating-pack,:root #homeScreen .hero-pack-fan:focus-within .hero-floating-pack{animation-play-state:paused}
 @keyframes pack-arc{
  0%{transform:translate(-500px,88px) rotate(-17deg)}
  25%{transform:translate(calc(25cqw - 300px),32px) rotate(-9deg)}
  50%{transform:translate(calc(50cqw - 100px),8px) rotate(0deg)}
  75%{transform:translate(calc(75cqw + 100px),32px) rotate(9deg)}
  100%{transform:translate(calc(100cqw + 300px),88px) rotate(17deg)}
 }
 @media(prefers-reduced-motion:reduce){
  :root #homeScreen .desktop-hero-visual{overflow-x:auto!important;mask-image:none}
  .hero-pack-fan{display:flex;width:max-content;gap:36px;padding:24px 36px}
  :root #homeScreen .hero-floating-pack{position:relative;animation:none;transform:none;will-change:auto;flex:0 0 190px}
 }
}