/* Staging-only responsive layout. Mobile dimensions keep the original 1vw.
   Generated compatibility lengths use --pg-unit; no runtime DOM rewriting. */
@media (min-width:501px) {
  :root { --pg-unit:min(1vw,5.6px); --pg-content:1280px; --pg-form:560px; --pg-nav-left:50%; --pg-nav-width:min(100%,1280px); --pg-nav-height:76px; }
  html, body { max-width:none; width:100%; margin:0; }
  #app { width:100%; max-width:var(--pg-content); margin-inline:auto; }
  html[data-pg-view="index"] .page:not(#p-home):not(#p-wh) { left:0; right:0; width:min(100%,var(--pg-form)); max-width:var(--pg-form); margin-inline:auto; }
  #p-home { width:100%; }
  #p-wh { left:0; right:0; width:min(100%,var(--pg-content)); max-width:var(--pg-content); margin-inline:auto; }
  .topbar { height:68px; padding-inline:24px; }
  .topbar-actions { gap:12px; }
  .topbar-wallet-btn { font-size:18px; min-width:160px; }
  .tabbar { left:50%; transform:translateX(-50%); width:min(100%,var(--pg-content)); height:76px!important; }
  .tabbar.qs-open { transform:translate(-50%,100%)!important; }
  .page.active { padding-bottom:96px; }
  #p-home .banner { width:calc(100% - 32px); height:auto; aspect-ratio:3.1; max-height:350px; margin:16px 16px 0; }
  #p-home .banner-slide { padding:0; }
  #p-home .congrats-wrap { margin:16px; padding:14px; }
  #p-home .boxgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:14px 20px 30px; }
  #p-home .bx { width:100%; min-width:0; margin:0; border-radius:10px; overflow:hidden; }
  #p-home .bx .bn { padding:16px; }
  #p-home .bx .bn .name { font-size:20px; line-height:1.4; height:auto; min-height:28px; }
  #p-home .bx .bn .price { font-size:24px; line-height:1.3; }
  #p-home .home-sp-streak { font-size:16px; }
  #p-home .home-filter-row { padding:8px 20px; }
  #p-home .home-filter-heading { min-width:0; }
  #p-home .home-filter-trigger { flex-shrink:0; }
  #backTopBtn { right:max(20px,calc((100vw - var(--pg-content)) / 2 + 20px))!important; bottom:96px!important; }
  .dt-main,.dt-bottom-section,.dt-prize-grid { width:100%; max-width:100%; }
  .dt-bottom-bar { left:50%; right:auto; transform:translateX(-50%); width:min(100%,var(--pg-form)); }
  .dt-header-center { flex:1; min-width:0; }
  .dt-prize-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px; padding:12px 16px 24px; align-content:start; }
  .dt-prize-card { width:100%; min-width:0; margin:0; }
  .dt-pc-img-wrap { width:100%; height:auto; aspect-ratio:1; }
  .dt-pc-info { width:100%; }
  .result-content { width:min(100vw,var(--pg-form)); }
  .ppm-stage,.ppm-viewport { width:min(100vw,var(--pg-form)); }
  #whBar { max-width:var(--pg-form)!important; bottom:76px!important; }
  #whGrid [data-wh-list] { display:grid!important; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px!important; }
  #whGrid [data-wh-item] { width:100%!important; min-width:0; }
  #whGrid [data-wh-item] > div:nth-of-type(2) { height:auto!important; aspect-ratio:1; }
  #p-mine.active { overflow-y:auto!important; touch-action:pan-y!important; }
  #p-mine #levelCard { max-width:calc(100% - 32px); }
  #langPanel { top:68px; }
  .bsheet,.ol-panel,.pay-sheet,.coupon-sheet,.share-sheet,.dbp-sheet,.home-filter-sheet,.invite-share-modal { width:min(100%,var(--pg-form)); max-width:var(--pg-form); max-height:calc(100dvh - 32px); }
  .login-modal,.login-modal.show { width:min(100%,var(--pg-form)); max-width:var(--pg-form); margin-inline:auto; height:min(780px,92dvh); max-height:92dvh; overflow-y:auto; }
  .loading,.dt-mode-overlay,.auto-mode-overlay { width:100vw; }

  /* Standalone documents retain a readable form width; all their fixed bars
     and overlay panels use the same bound instead of the screen width. */
  html:not([data-pg-view="index"]) { --pg-nav-width:min(100%,560px); }
  html:not([data-pg-view="index"]) body { max-width:var(--pg-form); margin-inline:auto; }
  html[data-pg-view="daily-level-box"] { --pg-unit:4.8px; --pg-form:480px; }
  html[data-pg-view="vip-center"] .app-wrap { max-width:var(--pg-form); }
  html:not([data-pg-view="index"]) .tabbar { width:min(100%,var(--pg-form)); }
  html:not([data-pg-view="index"]) :is(.header,.top,.bottom,.footer,.bottom-bar) { width:100%; max-width:var(--pg-form); margin-inline:auto; }
  html[data-pg-view="recharge"] .bottom { bottom:76px; }
  html[data-pg-view="recharge"] .title-tabs { width:100%; }
  html[data-pg-view="recharge"] .page:not(.withdraw-mode) .scroll { overflow-y:auto; display:block; padding-bottom:230px; }
  html[data-pg-view="recharge"] .page:not(.withdraw-mode) .method-list { height:auto; overflow:visible; padding-bottom:24px; }
  html[data-pg-view="recharge"] .page:not(.withdraw-mode) .amount-wrap { min-height:0; }
  html[data-pg-view="recharge"] :is(.fpx-bank-mask,.withdraw-account-mask,.withdraw-provider-mask,.cw-network-mask,.withdraw-scan-mask,.withdraw-warning-mask) { max-width:none; }
  html[data-pg-view="recharge"] :is(.fpx-bank-sheet,.withdraw-account-sheet,.withdraw-provider-sheet,.cw-network-sheet,.withdraw-scan-sheet) { width:min(100%,var(--pg-form)); max-width:var(--pg-form); margin-inline:auto; }
}
@media (min-width:1100px) {
  #p-home .boxgrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  #p-home .bx .bn .name { font-size:19px; }
}

/* Desktop layout only. Phone and tablet rules below 1024px are unchanged. */
@media (min-width:1024px) {
  :root {
    --pg-content:560px;
    --pg-form:560px;
    --pg-nav-width:min(100%,560px);
  }
  html:not([data-pg-view="index"]) body > .page {
    width:100%;
    max-width:var(--pg-form);
    margin-inline:auto;
  }

  /* One centered column for every page and its fixed navigation. */
  #p-home .boxgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:12px 16px 28px; }
  #p-home .bx .bn { padding:12px; }
  #p-home .bx .bn .name { font-size:18px; }
  #p-home .bx .bn .price { font-size:22px; }
  #p-home .congrats-wrap { margin:12px 16px; padding:8px 0; }
  #p-home .home-filter-row { padding-inline:16px; }

  /* Keep translateY opening animations intact; center using auto margins. */
  #boxRecordModal,
  #helpPopup {
    left:0!important;
    right:0!important;
    width:min(100%,var(--pg-form))!important;
    max-width:var(--pg-form)!important;
    margin-inline:auto!important;
    max-height:calc(100dvh - 24px);
    box-sizing:border-box;
  }

  /* Adjacent preview cards may peek in, but must stay inside the page column. */
  .ppm-stage { width:var(--pg-form); max-width:100%; }
  .ppm-viewport { width:100%; max-width:var(--pg-form); overflow:hidden; padding-block:12px; margin-block:-12px; }

  html[data-pg-view="daily-level-box"] { --pg-form:560px; --pg-unit:5.6px; }
  html[data-pg-view="daily-level-box"] :is(.dlb-page,.dlb-hero-bg,.dlb-head,.dlb-sheet,.dlb-result-content) { max-width:var(--pg-form); }
  html[data-pg-view="daily-level-box"] .dlb-sheet { max-height:calc(100dvh - 24px); }
}

/* Desktop mouse layouts only: leave touch phone/tablet layouts unchanged. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) {
  #settingsList .sr > svg,
  #settingsList .sr > .currency-flag-image {
    width:calc(4 * var(--pg-unit, 1vw))!important;
    height:calc(4 * var(--pg-unit, 1vw))!important;
    flex-shrink:0;
  }

  #chatPanel,
  #addrAddBtnWrap,
  #addrPgFooter,
  #p-ship-addr-select > div:last-child,
  #cityPickerPanel,
  #bdPickerPanel,
  #tab-daily .currentUserBar {
    left:0!important;
    right:0!important;
    width:min(100%,var(--pg-form,560px))!important;
    max-width:var(--pg-form,560px)!important;
    margin-inline:auto!important;
    box-sizing:border-box;
  }
  #addrAddBtnWrap > button,
  #p-ship-addr-select > div:last-child > button { width:100%!important; }
  #addrAddBtnWrap { transform:none!important; }
  #addrPgFooter > button { flex:1; width:0!important; min-width:0; }
  #cityPickerPanel { max-height:min(70dvh,calc(100dvh - 24px)); }
  #cityPickerBody { min-height:0; }
  #bdPickerPanel { max-height:calc(100dvh - 24px); overflow-y:auto; }

  /* The wrapper's grey fill was exposed around the narrower button. */
  html[data-pg-view="daily-level-box"] .dlb-action {
    width:336px;
    max-width:calc(100% - 32px);
    height:61px;
    background:transparent;
  }
  html[data-pg-view="daily-level-box"] .dlb-draw-btn {
    width:100%;
    height:100%;
  }
}

/* Match the existing recharge/profile column on tablet-sized windows.
   Both dimensions must exceed 500px, preserving phone landscape as well. */
@media (min-width:501px) and (min-height:501px) and (max-width:1023px) {
  html[data-pg-view="index"] {
    --pg-content:560px;
    --pg-nav-width:min(100%,560px);
  }
}

/* Desktop and tablet frame: page, fixed controls and overlays share one
   inset viewport. Requiring both tablet dimensions >500px excludes phones. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine),
       (min-width:501px) and (min-height:501px) and (max-width:1023px),
       (min-width:1024px) and (min-height:501px) and (hover:none),
       (min-width:1024px) and (min-height:501px) and (pointer:coarse) {
  :root {
    --pg-desktop-gutter:clamp(16px,3dvh,40px);
    --pg-desktop-height:calc(100dvh - 2 * var(--pg-desktop-gutter));
  }
  html { background:#f6f6fa; overflow:hidden; overscroll-behavior:none; }
  html body {
    position:fixed!important;
    inset:var(--pg-desktop-gutter) auto auto 50%!important;
    width:var(--pg-form,560px)!important;
    max-width:calc(100% - 32px)!important;
    height:var(--pg-desktop-height)!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    transform:translateX(-50%);
    overflow:clip!important;
    overscroll-behavior:none;
  }
  html #app { height:100%!important; min-height:0!important; }
  html .page { min-height:0!important; }
  html:not([data-pg-view="index"]) body > :is(.page,.agreement-page,.profile-page,.app-wrap),
  html[data-pg-view="daily-level-box"] .dlb-page {
    height:100%!important;
    min-height:0!important;
  }
  .loading,.dt-mode-overlay,.auto-mode-overlay { width:100%!important; height:100%!important; }
  #backTopBtn { right:20px!important; }
  #boxRecordModal,#helpPopup,#cityPickerPanel,#bdPickerPanel,
  .bsheet,.ol-panel,.pay-sheet,.coupon-sheet,.share-sheet,.dbp-sheet,
  .home-filter-sheet,.invite-share-modal,.dlb-sheet {
    max-height:calc(var(--pg-desktop-height) - 24px)!important;
  }
  .login-modal,.login-modal.show { max-height:calc(var(--pg-desktop-height) - 24px)!important; }
  /* Short windows scroll the prize card, keeping the close control visible. */
  .ppm-stage > .ppm-viewport { flex-shrink:1; min-height:0; overflow-y:auto; }
  html[data-pg-view="daily-level-box"] .prize-preview-modal {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; padding:16px 0; box-sizing:border-box;
  }
  html[data-pg-view="daily-level-box"] .ppm-counter-wrap {
    position:relative; top:auto; left:auto; transform:none; margin:0; flex:0 0 auto;
  }
  html[data-pg-view="daily-level-box"] .ppm-viewport {
    position:relative; top:auto; left:auto; flex:0 1 auto; min-height:0;
    overflow-y:auto; margin:0;
  }
  html[data-pg-view="daily-level-box"] .ppm-close {
    position:relative; left:auto; bottom:auto; transform:none; flex:0 0 auto;
    width:48px; height:48px;
  }
}

/* User-provided artwork behind the existing desktop page frame. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) {
  html {
    background-color:#080e1a;
    background-image:url('./assets/desktop-background4-20260924.webp');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
  }
}

/* Separate tablet artwork. Both dimensions exceed 500px to leave phones,
   including landscape phones, on their existing background and layout. */
@media (min-width:501px) and (min-height:501px) and (max-width:1023px),
       (min-width:1024px) and (min-height:501px) and (hover:none),
       (min-width:1024px) and (min-height:501px) and (pointer:coarse) {
  html {
    background:#080e1a url('./assets/tablet-background4-20260924.webp') center center / cover no-repeat fixed;
  }
  html[data-pg-view="index"] body {
    background-color:transparent;
    background-image:none;
  }
}

/* Scale the pattern proportionally to cover the outer viewport. */
html.pg-has-backdrop:not(.draw-anim-open):not(.draw-anim-preopen){background:#080e1a!important}
.pg-site-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#080e1a}
.pg-site-backdrop[data-art='tablet']{pointer-events:auto;touch-action:none;overscroll-behavior:none}
.pg-backdrop-art{display:block;width:100%;height:100%}
html.draw-anim-open .pg-site-backdrop,html.draw-anim-preopen .pg-site-backdrop{display:none}