/* ============================================================
   STACK — Mobile base (applies to every device until overridden)
   Default breakpoint: 0 to 767px
   ============================================================ */

/* ── Global scroll guard ── */
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  position: static !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
}

/* ── Drawer-open state: only HERE may overflow be locked ── */
body.is-drawer-open {
  overflow: hidden !important;
  position: relative;
}

/* Deprecated class alias — user's old code uses .drawer-open */
body.drawer-open {
  overflow: visible !important;   /* KILL the old freeze */
}

/* ── Layout shells ──
   IMPORTANT: the display override below must NOT defeat the `hidden`
   contract. `#shell` ships with the `hidden` attribute and app.js keeps it
   hidden until sign-in (showShell/§9), while `.shell` here is (0,1,0) —
   the SAME specificity as the global `[hidden] { display:none !important }`
   in style.css. Because this file loads AFTER style.css, a plain
   `display:block !important` on `.shell` WON the cascade, so the whole
   home page stayed visible behind the welcome/login screen: two pages
   merged on one viewport. BUG: auth screen and home page rendered together.
   Fix: scope the layout override to the shell's visible state only, and
   re-assert `[hidden]` immediately after so the hide always wins. */
.shell {
  display: block !important;  /* was flex column — that trapped the scroll */
  min-height: 100dvh;         /* dynamic viewport height for mobile */
  height: auto !important;
  max-height: none !important;
  width: 100%;
  max-width: 100vw;
  overflow: visible !important;  /* never hide scroll on the shell */
}

/* The hide contract, stated after the layout override above so it cannot be
   out-ranked. `[hidden]` alone ties on specificity and loses on order, so the
   id form (1,1,0) is used for the two structural wrappers the router toggles. */
[hidden] { display: none !important; }
.shell[hidden],
#shell[hidden] { display: none !important; }

/* ── Route canvas — the container every non-Home page renders into.
      This is what gives non-Home pages their edge breathing room. ── */
#main-canvas {
  padding: 16px 16px 96px 16px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* DELIBERATELY NO `overflow` HERE.
     `overflow-x: hidden` with overflow-y left alone COMPUTES overflow-y
     to `auto`, which silently turns this element into a scroll container.
     ios.css (loaded after this file, same specificity) then applies
     `overscroll-behavior-y: contain` to `.route-canvas`, which this
     element also carries. A scroll container with no scrollable overflow
     plus `contain` swallows the swipe instead of chaining it to the
     document — the page appears frozen. That was Bug 2.
     Horizontal overflow is already clipped by `overflow-x: hidden` on
     html/body above, so there is nothing to gain here. DO NOT re-add
     `overflow` to this rule or to `.route-canvas` below. */
}

/* IMPORTANT: the desktop mirror (#dt-route-canvas) ALSO carries
   class="route-canvas", so the mobile padding must be scoped or it
   leaks onto desktop and fights style.css's `#dt-route-canvas` rules.
   A max-width query is a mobile-tier query, so it belongs in this file. */
@media (max-width: 1023px) {
  .route-canvas {
    padding: 16px 16px 96px 16px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* no `overflow` here either — see the comment on #main-canvas above */
  }
}

/* Nested cards inside the canvas already have their own padding —
   reduce it slightly so we don't double-pad. */
#main-canvas .route-panel,
#main-canvas .bonus-card,
#main-canvas .referral-box {
  padding: 14px;
  margin-left: 0;
  margin-right: 0;
}

/* ── Topbar (mobile: 56px) ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: env(safe-area-inset-top, 0) 16px 0;
  height: calc(56px + env(safe-area-inset-top, 0));
  background: #1A2C38;
  border-bottom: 1px solid #2F4553;
}
.topbar__logo { height: 28px; width: auto; }
.topbar__search { display: none; }   /* hidden on mobile */
.topbar__menubtn { display: none !important; }  /* NO hamburger */

/* ── Main content ── */
.main-content,
.dashboard__content,
.dashboard-layout,
.shell__main {
  flex: 0 0 auto !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
}

/* ── Sidebar: hidden on mobile, becomes drawer when open ── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: #1A2C38;
  border-right: 1px solid #2F4553;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 60;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(env(safe-area-inset-top, 0) + 16px) 10px
           calc(env(safe-area-inset-bottom, 0) + 16px);
  -webkit-overflow-scrolling: touch;
}
.sidebar--open {
  transform: translateX(0);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 55;
}
.sidebar-backdrop--open {
  opacity: 1;
  visibility: visible;
}

/* ── Bottom nav (mobile-only, fixed) ── */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(64px + env(safe-area-inset-bottom, 0));
  padding: 0 8px env(safe-area-inset-bottom, 0);
  background: rgba(15, 33, 46, 0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid #2F4553;
  z-index: 100;
}

/* ── Desktop shell hidden at this size ── */
#desktop-shell,
.desktop-view {
  display: none !important;
}

/* ── Hero, cards, panels: full width ── */
.hero-section,
.game-card,
.bonus-card,
.referral-box,
.stat-card,
.route-panel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Prevent any horizontal scrollbar ── */
* {
  box-sizing: border-box;
}
img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* ── Belt-and-braces: nothing may freeze body scroll except the drawer.
      Any leftover `.drawer-open` / inline lock loses to this rule. ── */
body:not(.is-drawer-open) {
  overflow-y: auto !important;
  position: static !important;
  touch-action: auto !important;
}

/* NUCLEAR SCROLL FIX — mobile only */
@media (max-width: 1023px) {
  html, body {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
  }

  .shell,
  .dashboard-layout,
  .shell__main,
  .main-content,
  .dashboard__content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: none !important;
    position: static !important;
  }
  body { overflow-y: scroll !important; }

  /* Re-assert the hide contract AFTER the layout rules above.
     The router/app.js toggle `hidden` on #auth, #shell, #homeScreen and
     #main-canvas when switching between the auth screens and the app. Every
     rule above is `!important` and ties with the global `[hidden]` on
     specificity, so without this block they win purely by source order and
     the signed-out home page renders behind the welcome/login screen. */
  [hidden] { display: none !important; }
  #auth[hidden],
  #shell[hidden],
  #splash[hidden],
  #homeScreen[hidden],
  #main-canvas[hidden],
  #dt-route-canvas[hidden],
  .shell[hidden],
  .screen[hidden] {
    display: none !important;
  }

  /* Kill any fixed overlay that might eat touches */
  body:not(.is-drawer-open):not(.drawer-open) .sidebar-backdrop,
  body:not(.is-drawer-open):not(.drawer-open) .sidebar,
  body:not(.is-drawer-open):not(.drawer-open) .dt-mobile-drawer {
    display: none !important;
    pointer-events: none !important;
  }
}