/* ShoreBuild v103 — dedicated mobile application-style layout.
   Desktop remains unchanged: every rule is scoped to <= 768px unless noted. */

:root{
  --mobile-page-padding:16px;
  --mobile-card-gap:12px;
  --mobile-section-gap:40px;
  --mobile-card-padding:14px;
  --mobile-control-h:46px;
  --mobile-header-h:60px;
  --mobile-safe-top:env(safe-area-inset-top,0px);
  --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --sb-mobile-blue:#1769aa;
  --sb-mobile-blue-2:#39bce8;
  --sb-mobile-ink:#0b3555;
  --sb-mobile-bg:#c9efff;
  --sb-mobile-card:#f6fcff;
  --sb-mobile-border:#77cdef;
}

@media (max-width:768px){
  html{scroll-padding-top:calc(var(--mobile-header-h) + var(--mobile-safe-top) + 8px)}
  body{min-width:0;max-width:100%;padding-top:calc(var(--mobile-header-h) + var(--mobile-safe-top));-webkit-text-size-adjust:100%;}
  body.mobile-drawer-open{overflow:hidden;touch-action:none}
  *,*::before,*::after{box-sizing:border-box}
  img,video,canvas,svg,iframe{max-width:100%}
  button,input,select,textarea{font:inherit;max-width:100%}
  table{max-width:100%}
  td,th,a,p,h1,h2,h3,h4,h5,h6,strong,span{overflow-wrap:anywhere}

  /* Original wide nav becomes a compact app bar. */
  .future-topbar,.future-topbar.v43-topbar,.future-subpage-topbar,
  html.shore-big-update-active:not([data-big-update-subpage="true"]) #futureHomepage .future-topbar{
    position:fixed!important;z-index:9000!important;top:0!important;left:0!important;right:0!important;
    height:calc(var(--mobile-header-h) + var(--mobile-safe-top))!important;
    min-height:calc(var(--mobile-header-h) + var(--mobile-safe-top))!important;
    padding:var(--mobile-safe-top) var(--mobile-page-padding) 0!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
    background:rgba(235,249,255,.96)!important;border-bottom:1px solid rgba(35,122,184,.22)!important;
    box-shadow:0 4px 18px rgba(14,77,118,.08)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
  .future-topbar > .future-nav,.future-topbar > .future-nav-search-button,.future-topbar > .future-account-space{display:none!important}
  .sb-mobile-brand{display:flex;align-items:center;min-width:0;color:var(--sb-mobile-blue)!important;text-decoration:none!important;font-family:"Minecraft Ten",Arial,sans-serif;font-size:19px;font-weight:800;line-height:1}
  .sb-mobile-menu-button{width:44px;height:44px;min-width:44px;border:2px solid #2a88bd;border-radius:12px;background:#effaff;color:#0b4c76;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 3px 0 rgba(18,91,135,.18)}
  .sb-mobile-menu-button span,.sb-mobile-menu-button span::before,.sb-mobile-menu-button span::after{display:block;width:19px;height:2px;border-radius:2px;background:currentColor;content:"";position:relative}
  .sb-mobile-menu-button span::before{position:absolute;top:-6px}.sb-mobile-menu-button span::after{position:absolute;top:6px}
  .sb-mobile-menu-button:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(18,91,135,.18)}

  /* Drawer */
  .sb-mobile-drawer-backdrop{position:fixed;z-index:9996;inset:0;background:rgba(3,28,47,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
  .sb-mobile-drawer{position:fixed;z-index:9997;top:0;right:0;bottom:0;width:min(86vw,330px);padding:calc(14px + var(--mobile-safe-top)) 14px calc(20px + var(--mobile-safe-bottom));background:#f2fbff;border-left:1px solid #8ed6f0;box-shadow:-16px 0 44px rgba(6,48,77,.18);transform:translateX(105%);transition:transform .22s ease;overflow-y:auto;overscroll-behavior:contain}
  body.mobile-drawer-open .sb-mobile-drawer-backdrop{opacity:1;visibility:visible}
  body.mobile-drawer-open .sb-mobile-drawer{transform:translateX(0)}
  .sb-mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 14px;border-bottom:1px solid #b6e2f3;margin-bottom:12px}
  .sb-mobile-drawer-head strong{font:800 18px "Minecraft Ten",Arial,sans-serif;color:#1769aa}
  .sb-mobile-drawer-close{width:44px;height:44px;border:0;border-radius:11px;background:#dff5ff;color:#0b4c76;font-size:27px;line-height:1;cursor:pointer}
  .sb-mobile-drawer-label{margin:17px 8px 7px;color:#52809c;font:800 10px "Minecraft Ten",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
  .sb-mobile-drawer-nav{display:grid;gap:4px}
  .sb-mobile-drawer-nav a,.sb-mobile-drawer-category{min-height:44px;display:flex;align-items:center;width:100%;padding:9px 11px;border:0;border-radius:10px;background:transparent;color:#103f60;text-decoration:none;text-align:left;font:800 14px "Minecraft Ten",Arial,sans-serif;cursor:pointer}
  .sb-mobile-drawer-nav a:active,.sb-mobile-drawer-category:active,.sb-mobile-drawer-category.active{background:#d9f2fd;color:#0c6598}
  .sb-mobile-drawer-divider{height:1px;background:#c5e7f4;margin:14px 5px}
  .sb-mobile-drawer-account{padding:8px 10px 4px;color:#456f88;font-size:12px;line-height:1.4}

  /* The existing account/login is a bottom-right floating action on mobile. */
  .account-area{position:fixed!important;z-index:8990!important;right:14px!important;left:auto!important;top:auto!important;bottom:calc(14px + var(--mobile-safe-bottom))!important;width:auto!important;max-width:calc(100vw - 28px)!important;margin:0!important;padding:0!important;display:flex!important;justify-content:flex-end!important;pointer-events:none}
  .account-area > *{pointer-events:auto}
  .discord-login-button,.account-profile-button{min-height:48px!important;max-width:min(220px,calc(100vw - 28px))!important;border-radius:15px!important;box-shadow:0 7px 24px rgba(8,64,99,.22)!important}
  .discord-login-button{padding:10px 14px!important;width:auto!important;font-size:12px!important;white-space:nowrap}
  .account-profile-button{padding:6px 10px 6px 7px!important;gap:8px!important}
  .account-profile-button img{width:34px!important;height:34px!important;min-width:34px!important;border-radius:10px!important}
  #accountUsername{display:block!important;max-width:120px!important;font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .account-arrow{display:block!important}
  .account-dropdown{position:absolute!important;right:0!important;left:auto!important;top:auto!important;bottom:calc(100% + 10px)!important;width:min(286px,calc(100vw - 28px))!important;max-height:min(66vh,510px)!important;overflow-y:auto!important;transform-origin:bottom right!important}
  .account-dropdown-header{position:sticky;top:0;z-index:2;background:inherit}

  /* Leave safe room for the floating account control. */
  body::after{content:"";display:block;height:calc(78px + var(--mobile-safe-bottom));pointer-events:none}
  .pagination,.shorebuild-install-callout,.future-home-main,.page,.my-orders-main,.marketplace-owner-shell{scroll-margin-bottom:90px}

  /* Build page intro and controls. */
  .page{width:100%!important;max-width:100%!important;padding-left:var(--mobile-page-padding)!important;padding-right:var(--mobile-page-padding)!important;margin-left:auto!important;margin-right:auto!important}
  .shorebuild-intro{width:100%!important;margin:18px 0 12px!important;padding:0!important}
  .shorebuild-intro h1,#shoreSmpWordmark{font-size:clamp(28px,9vw,36px)!important;line-height:1.05!important;margin:0 0 5px!important}
  .shorebuild-intro p{font-size:13px!important;margin:0!important}
  .search-row,.restored-build-controls{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;width:100%!important;margin:14px 0 10px!important;padding:0!important}
  .search-box{width:100%!important;min-width:0!important;margin:0!important}
  .search-box input,.sort-select{width:100%!important;height:var(--mobile-control-h)!important;min-height:var(--mobile-control-h)!important;border-radius:12px!important;padding:0 13px!important;margin:0!important;font-size:14px!important}
  .categories{display:none!important}
  .sb-mobile-build-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;margin:0 0 13px;width:100%}
  .sb-mobile-category-button,.sb-mobile-sort-label{min-width:0;height:44px;border:2px solid #6bc8e9;border-radius:12px;background:#eefaff;color:#154a6a;padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:7px;font:800 11px "Minecraft Ten",Arial,sans-serif}
  .sb-mobile-category-button{cursor:pointer}
  .sb-mobile-filter-caption{font:700 9px Arial,sans-serif;color:#5d88a0;display:block;margin-bottom:3px}
  .sb-mobile-filter-value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Build cards: connected compact components. */
  .builds{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--mobile-card-gap)!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;align-items:stretch!important}
  .build-card{min-width:0!important;width:100%!important;min-height:0!important;margin:0!important;border-radius:14px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;background:#f6fcff!important;border-width:2px!important;box-shadow:0 4px 0 rgba(22,105,170,.13)!important;transition:transform .16s ease,box-shadow .16s ease!important}
  .build-card:active{transform:scale(.985)!important;box-shadow:0 2px 0 rgba(22,105,170,.12)!important}
  .build-card > img{width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;display:block!important;border-radius:0!important;margin:0!important;flex:none!important}
  .build-card-content,.build-card .build-info{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;gap:3px 8px!important;align-items:end!important;min-width:0!important;padding:10px 10px 11px!important;margin:0!important;background:transparent!important;flex:1!important}
  .build-card .build-category{grid-column:1 / -1!important;margin:0!important;font-size:9px!important;line-height:1.2!important;letter-spacing:.04em!important}
  .build-card h2{grid-column:1!important;grid-row:2!important;margin:0!important;min-width:0!important;font-size:12px!important;line-height:1.3!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  .build-card-content::after,.build-card .build-info::after{content:"View →";grid-column:2;grid-row:2;align-self:end;white-space:nowrap;color:#1769aa;font:800 9px "Minecraft Ten",Arial,sans-serif}
  .build-card[data-price] .build-card-content::before,.build-card[data-price] .build-info::before{content:attr(data-price);grid-column:1 / -1;grid-row:3;margin-top:5px;color:#0b4c76;font:800 13px "Minecraft Ten",Arial,sans-serif}

  /* Pagination. */
  .pagination{width:100%!important;display:grid!important;grid-template-columns:46px minmax(0,1fr) 46px!important;align-items:center!important;gap:10px!important;margin:18px auto 26px!important;padding:0!important}
  .pagination button{width:46px!important;height:44px!important;min-width:46px!important;border-radius:12px!important;padding:0!important}
  #pageNumber{text-align:center!important;font-size:12px!important;white-space:nowrap}

  /* Build detail modal becomes a nearly-full-height bottom sheet. */
  .build-popup,.addon-popup,.sub-popup,.stock-order-popup,.spawner-modal,.mineouts-modal{padding:0!important;align-items:flex-end!important;justify-content:center!important}
  .build-popup .popup-content,.addon-popup .popup-content,.sub-popup .popup-content,
  .stock-order-popup > div,.spawner-modal > div,.mineouts-modal > div{
    position:relative!important;width:100%!important;max-width:100%!important;max-height:calc(92dvh - var(--mobile-safe-top))!important;margin:0!important;border-radius:22px 22px 0 0!important;padding:16px var(--mobile-page-padding) calc(18px + var(--mobile-safe-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
  }
  .build-popup .popup-content::before{content:"";display:block;width:42px;height:4px;border-radius:5px;background:rgba(17,75,108,.25);margin:0 auto 12px}
  .popup-close{position:sticky!important;float:right!important;top:0!important;right:0!important;z-index:4!important;width:44px!important;height:44px!important;min-width:44px!important}
  #popupImage{width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;border-radius:13px!important;margin:0 0 12px!important}
  .popup-info{min-width:0!important;padding:0!important}
  .popup-info h2{font-size:21px!important;line-height:1.2!important;margin:4px 0 12px!important}
  .popup-details{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin:0 0 12px!important}
  .detail,.price-row{min-width:0!important;padding:10px 0!important;gap:8px!important}
  .popup-prices{min-width:0!important}
  .purchase-build-button{width:100%!important;min-height:48px!important;margin-top:8px!important}

  /* Generic modal safety net across every section. */
  [class*="modal"] > [class*="content"],[class*="popup"] > [class*="content"],.dialog,.modal-content{
    max-width:calc(100vw - 24px);max-height:calc(90dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom));overflow:auto;overflow-x:hidden;
  }

  /* Homepage */
  .future-home-main{width:100%!important;max-width:100%!important;padding-left:var(--mobile-page-padding)!important;padding-right:var(--mobile-page-padding)!important}
  html.shore-big-update-active:not([data-big-update-subpage="true"]) .future-hero{width:100%!important;max-width:100%!important;min-height:0!important;margin:0!important;padding:24px 0 18px!important;text-align:left!important}
  .future-hero h1{font-size:clamp(30px,10vw,36px)!important;margin:0 0 8px!important;line-height:1!important}
  .future-hero p{font-size:14px!important;line-height:1.45!important;margin:0 0 14px!important}
  .future-hero-tags{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin:0 0 14px!important}
  .future-hero-tags span{font-size:9px!important;padding:6px 8px!important;min-height:0!important}
  .future-hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin:0!important}
  .future-hero-button{min-width:0!important;min-height:44px!important;width:100%!important;padding:9px 8px!important;font-size:10px!important}
  .future-featured-build-card{width:100%!important;max-width:100%!important;margin:6px 0 24px!important;border-radius:16px!important;display:grid!important;grid-template-columns:42% minmax(0,1fr)!important;min-height:0!important}
  .future-featured-build-card > img{height:100%!important;min-height:120px!important;aspect-ratio:auto!important;border-radius:0!important;object-fit:cover!important}
  .future-featured-build-info,.future-featured-build-card .build-info{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;padding:12px!important}
  .featured-requested-tag{font-size:8px!important;padding:5px 8px!important}
  .future-featured-build-info h2{font-size:16px!important;line-height:1.2!important}
  .future-featured-build-card .build-info::after,.future-featured-build-card .build-info::before{display:none!important}
  .shore-home-scroll-content{width:100%!important;max-width:100%!important;margin:0!important}
  .shore-home-section{margin:0 0 var(--mobile-section-gap)!important;padding:0!important}
  .shore-home-section-heading{margin-bottom:14px!important}
  .shore-home-section-heading h2{font-size:23px!important;line-height:1.13!important;margin:5px 0 7px!important}
  .shore-home-section-heading p{font-size:13px!important;line-height:1.45!important;margin:0!important}
  .shore-home-quick-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .shore-home-quick-card{min-width:0!important;min-height:0!important;padding:13px!important;border-radius:14px!important}
  .shore-home-quick-card strong{font-size:14px!important;line-height:1.2!important}
  .shore-home-quick-card p{font-size:11px!important;line-height:1.35!important;margin:6px 0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .shore-home-quick-card em,.shore-home-card-kicker{font-size:8px!important}
  .shore-home-process-grid{display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding-left:7px!important}
  .shore-home-process-card{position:relative!important;min-height:0!important;padding:4px 8px 20px 45px!important;border:0!important;background:transparent!important;box-shadow:none!important}
  .shore-home-process-card:not(:last-child)::after{content:"";position:absolute;left:16px;top:33px;bottom:0;width:2px;background:#86cfe9}
  .shore-home-process-card b{position:absolute!important;left:0!important;top:0!important;width:34px!important;height:34px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#e9f9ff!important;border:2px solid #37aede!important;font-size:9px!important}
  .shore-home-process-card strong{font-size:15px!important}
  .shore-home-process-card p{font-size:12px!important;line-height:1.4!important;margin:5px 0!important}
  .shore-home-process-card a{font-size:10px!important}
  .shore-home-feature-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .shore-home-feature-card,.shore-home-feature-wide{grid-column:auto!important;min-width:0!important;min-height:0!important;padding:13px!important;border-radius:14px!important}
  .shore-home-feature-card h3{font-size:14px!important;line-height:1.2!important;margin:4px 0 6px!important}
  .shore-home-feature-card p{font-size:11px!important;line-height:1.35!important;margin:0 0 8px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .shore-home-feature-card span,.shore-home-feature-card a{font-size:8px!important}
  .shore-home-stats,.shore-home-stat-grid,.shore-home-stats-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .shore-home-stat,.shore-home-stat-card{min-width:0!important;padding:14px 10px!important;text-align:center!important}

  /* Stock, Mineouts, spawners and form-heavy screens. */
  .mineouts-form,.mineout-form,.stock-form,.spawner-form{width:100%!important;max-width:100%!important}
  .mineouts-dimensions,.mineout-dimensions,.dimension-grid,.size-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .mineouts-dimensions input,.mineout-dimensions input,.dimension-grid input,.size-grid input{min-width:0!important;width:100%!important}
  .mineouts-summary,.mineout-summary,.order-estimate,.stock-summary{width:100%!important;max-width:100%!important;padding:14px!important;border-radius:14px!important}
  .mineouts-summary button,.mineout-summary button,.order-estimate button,.stock-summary button{width:100%!important;min-height:46px!important}

  /* Footer */
  footer,.future-footer,.shore-footer{max-width:100%!important;padding-left:var(--mobile-page-padding)!important;padding-right:var(--mobile-page-padding)!important}
  footer nav,.future-footer nav,.shore-footer nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 12px!important;white-space:normal!important}

  /* Tables become horizontally self-contained instead of breaking page width. */
  .table-wrap,.admin-table-wrap,.orders-table-wrap,[class*="table-container"]{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}

  /* Touch sizes */
  a.button,button,.account-menu-button,.category-btn,select,input[type="button"],input[type="submit"]{min-height:44px}
  .account-menu-button{width:100%!important}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  }
}

@media (max-width:360px){
  :root{--mobile-page-padding:14px;--mobile-card-gap:10px;--mobile-section-gap:34px}
  @media (max-width:768px){
    .builds{grid-template-columns:1fr!important}
    .build-card > img{aspect-ratio:16/8.5!important}
    .build-card h2{font-size:14px!important}
    .build-card-content,.build-card .build-info{padding:11px 12px 12px!important}
    .shore-home-quick-grid,.shore-home-feature-grid{grid-template-columns:1fr!important}
    .future-hero-actions{grid-template-columns:1fr!important}
    .sb-mobile-build-filter{grid-template-columns:1fr!important}
  }
}

@media (min-width:769px) and (max-width:1024px){
  /* Tablet-only guardrails; desktop visual language is preserved. */
  body{min-width:0}
  .future-topbar{padding-left:18px;padding-right:18px}
  .builds{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .build-card{min-width:0}
  [class*="modal"] > [class*="content"],[class*="popup"] > [class*="content"]{max-width:calc(100vw - 40px);max-height:90vh;overflow:auto}
}

/* =========================================================
   ShoreBuild v104 mobile stability + specificity fixes
   - overrides older high-specificity released UI rules
   - restores normal document scrolling on homepage
   - keeps Discord/account control truly bottom-right
   - prevents blank cyan gaps caused by legacy min-heights
========================================================= */
@media (max-width:768px){
  /* The released homepage previously had desktop-only fixed-height/overflow rules.
     Override them with equal/higher specificity so mobile uses normal page scrolling. */
  html.shore-big-update-active:not([data-big-update-subpage="true"]),
  html.shore-big-update-active:not([data-big-update-subpage="true"]) body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:clip!important;
    overflow-y:auto!important;
  }

  html.shore-big-update-active:not([data-big-update-subpage="true"]) #futureHomepage,
  html[data-shorebuild-public-release="true"] #futureHomepage{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }

  html.shore-big-update-active:not([data-big-update-subpage="true"]) #futureHomepage .future-home-main,
  html[data-shorebuild-public-release="true"] #futureHomepage .future-home-main{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:20px var(--mobile-page-padding) 8px!important;
    overflow:visible!important;
  }

  html.shore-big-update-active:not([data-big-update-subpage="true"]) #futureHomepage .future-hero,
  html[data-shorebuild-public-release="true"] #futureHomepage .future-hero{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:18px 0 14px!important;
    text-align:left!important;
  }

  html.shore-big-update-active:not([data-big-update-subpage="true"]) #futureHomepage #featuredCustomBuildCard,
  html[data-shorebuild-public-release="true"] #futureHomepage #featuredCustomBuildCard{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:4px 0 24px!important;
    border-radius:16px!important;
  }

  html.shore-big-update-active:not([data-big-update-subpage="true"]) #futureHomepage .shore-home-scroll-content,
  html[data-shorebuild-public-release="true"] #futureHomepage .shore-home-scroll-content{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0 0 28px!important;
    overflow:visible!important;
  }

  /* Old release rules used html.shore-big-update-active .account-area with !important,
     which beat the v103 .account-area selector. These selectors deliberately match/beat it. */
  html[data-shorebuild-public-release="true"] .account-area,
  html.shore-big-update-active .account-area,
  html[data-big-update-subpage="true"] .account-area,
  body > .account-area{
    display:flex!important;
    position:fixed!important;
    z-index:22000!important;
    top:auto!important;
    right:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
    left:auto!important;
    width:auto!important;
    max-width:calc(100vw - 28px)!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    justify-content:flex-end!important;
    align-items:flex-end!important;
    pointer-events:none!important;
  }

  html[data-shorebuild-public-release="true"] .account-area > *,
  html.shore-big-update-active .account-area > *,
  html[data-big-update-subpage="true"] .account-area > *,
  body > .account-area > *{
    pointer-events:auto!important;
  }

  html[data-shorebuild-public-release="true"] .discord-login-button,
  html[data-shorebuild-public-release="true"] .account-profile-button,
  html.shore-big-update-active .discord-login-button,
  html.shore-big-update-active .account-profile-button,
  html[data-big-update-subpage="true"] .discord-login-button,
  html[data-big-update-subpage="true"] .account-profile-button{
    width:auto!important;
    min-width:0!important;
    max-width:min(220px,calc(100vw - 28px))!important;
    min-height:48px!important;
    height:auto!important;
    border-radius:15px!important;
    font-size:11px!important;
    box-shadow:0 7px 24px rgba(8,64,99,.22)!important;
  }

  html[data-shorebuild-public-release="true"] .discord-login-button,
  html.shore-big-update-active .discord-login-button,
  html[data-big-update-subpage="true"] .discord-login-button{
    padding:10px 14px!important;
    white-space:nowrap!important;
  }

  html[data-shorebuild-public-release="true"] .account-profile-button,
  html.shore-big-update-active .account-profile-button,
  html[data-big-update-subpage="true"] .account-profile-button{
    padding:6px 10px 6px 7px!important;
    gap:8px!important;
  }

  html[data-shorebuild-public-release="true"] .account-dropdown,
  html.shore-big-update-active .account-dropdown,
  html[data-big-update-subpage="true"] .account-dropdown{
    position:absolute!important;
    top:auto!important;
    right:0!important;
    bottom:calc(100% + 10px)!important;
    left:auto!important;
    width:min(286px,calc(100vw - 28px))!important;
    max-height:min(66dvh,510px)!important;
    overflow-y:auto!important;
    transform-origin:bottom right!important;
    z-index:22500!important;
  }

  .account-area.sb-account-obscured{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Make the app header deterministic instead of inheriting desktop grid behavior. */
  html[data-shorebuild-public-release="true"] .future-topbar,
  html.shore-big-update-active .future-topbar,
  html[data-big-update-subpage="true"] .future-topbar,
  .future-topbar.future-subpage-topbar{
    display:flex!important;
    grid-template-columns:none!important;
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:calc(var(--mobile-header-h) + env(safe-area-inset-top,0px))!important;
    min-height:calc(var(--mobile-header-h) + env(safe-area-inset-top,0px))!important;
    margin:0!important;
    padding:env(safe-area-inset-top,0px) var(--mobile-page-padding) 0!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    overflow:visible!important;
  }

  html[data-shorebuild-public-release="true"] .future-topbar > .future-nav,
  html[data-shorebuild-public-release="true"] .future-topbar > .future-nav-search-button,
  html[data-shorebuild-public-release="true"] .future-topbar > .future-account-space,
  html.shore-big-update-active .future-topbar > .future-nav,
  html.shore-big-update-active .future-topbar > .future-nav-search-button,
  html.shore-big-update-active .future-topbar > .future-account-space,
  html[data-big-update-subpage="true"] .future-topbar > .future-nav,
  html[data-big-update-subpage="true"] .future-topbar > .future-nav-search-button,
  html[data-big-update-subpage="true"] .future-topbar > .future-account-space{
    display:none!important;
  }

  .sb-mobile-brand,
  .sb-mobile-menu-button{
    position:relative!important;
    z-index:1!important;
  }

  /* Builds page: guarantee the active mobile layout beats legacy 3-column rules. */
  body.builds-page .page{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:18px var(--mobile-page-padding) calc(92px + env(safe-area-inset-bottom,0px))!important;
  }

  body.builds-page .restored-build-controls,
  body.builds-page .search-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:9px!important;
    margin:0 0 9px!important;
    padding:0!important;
  }

  body.builds-page .categories{
    display:none!important;
  }

  body.builds-page .builds{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--mobile-card-gap)!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  body.builds-page .build-card{
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
  }

  /* Avoid invisible overlays blocking taps. */
  .sb-mobile-drawer-backdrop:not(.mobile-drawer-open *){
    pointer-events:none;
  }
  body.mobile-drawer-open .sb-mobile-drawer-backdrop{
    pointer-events:auto;
  }
}

@media (max-width:360px){
  body.builds-page .builds{
    grid-template-columns:1fr!important;
  }
}
@media (max-width:768px){
  .sb-mobile-drawer-backdrop{pointer-events:none!important}
  .sb-mobile-drawer{pointer-events:none!important}
  body.mobile-drawer-open .sb-mobile-drawer-backdrop,
  body.mobile-drawer-open .sb-mobile-drawer{pointer-events:auto!important}
}

/* =========================================================
   ShoreBuild v106 — targeted mobile builds/header fixes
   ========================================================= */
@media (max-width:768px){
  html[data-big-update-subpage="true"] body.builds-page,
  html.shore-big-update-active[data-big-update-subpage="true"] body.builds-page{
    min-height:100svh!important;
    height:auto!important;
  }

  html[data-big-update-subpage="true"] body.builds-page > .page,
  html.shore-big-update-active[data-big-update-subpage="true"] body.builds-page > .page{
    min-height:0!important;
    height:auto!important;
    padding:16px var(--mobile-page-padding) calc(96px + env(safe-area-inset-bottom,0px))!important;
    margin:0!important;
  }

  /* Mobile uses one search control + the compact category/sort row. Hide the
     original desktop select/categories instead of letting legacy !important
     rules create duplicate controls and giant gaps. */
  html.shore-big-update-active[data-big-update-subpage="true"] body.builds-page .restored-build-controls,
  html[data-big-update-subpage="true"] body.builds-page .restored-build-controls,
  html[data-big-update-subpage="true"] body.builds-page .search-row{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:10px 0 10px!important;
    padding:0!important;
  }
  html.shore-big-update-active[data-big-update-subpage="true"] body.builds-page .restored-build-controls .search-box,
  html[data-big-update-subpage="true"] body.builds-page .restored-build-controls .search-box{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    flex:none!important;
  }
  html.shore-big-update-active[data-big-update-subpage="true"] body.builds-page #sortSelect,
  html[data-big-update-subpage="true"] body.builds-page #sortSelect{
    display:none!important;
  }
  html.shore-big-update-active[data-big-update-subpage="true"] body.builds-page .categories,
  html[data-big-update-subpage="true"] body.builds-page .categories{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .sb-mobile-build-filter{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    margin:0 0 12px!important;
  }
  .sb-mobile-sort-native-wrap{
    position:relative;
    min-width:0;
    height:58px;
    border:2px solid #6bc8e9;
    border-radius:12px;
    background:#eefaff;
    color:#154a6a;
    padding:6px 10px 5px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
  }
  .sb-mobile-sort-native{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-width:0;
    height:28px;
    border:0;
    outline:0;
    background:transparent;
    color:#154a6a;
    font:800 12px "Minecraft Ten",Arial,sans-serif;
    padding:0 20px 0 0;
  }
  .sb-mobile-sort-native-wrap::after{
    content:"⌄";
    position:absolute;
    right:10px;
    bottom:10px;
    pointer-events:none;
    font-weight:900;
  }
  .sb-mobile-category-button{
    height:58px!important;
  }

  html[data-big-update-subpage="true"] body.builds-page .builds,
  html.shore-big-update-active[data-big-update-subpage="true"] body.builds-page .builds{
    margin-top:0!important;
  }

  /* Small mobile-only quick access buttons in the top bar. */
  .future-topbar .sb-mobile-header-quick,
  .future-subpage-topbar .sb-mobile-header-quick{
    display:flex!important;
    align-items:center;
    gap:6px;
    margin-left:auto;
    margin-right:6px;
  }
  .sb-mobile-quick-link{
    width:36px;
    height:36px;
    min-width:36px;
    display:grid;
    place-items:center;
    border:2px solid #2b8fc3;
    border-radius:10px;
    background:#effaff;
    color:#154a6a;
    text-decoration:none;
    font-size:16px;
    line-height:1;
    box-shadow:0 2px 0 rgba(22,76,114,.2);
  }
  .sb-mobile-quick-link:active{transform:translateY(1px);box-shadow:none}

  /* Keep the floating account control mobile-only and avatar-first. */
  body .account-area{
    right:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
  }
  body .account-info .account-profile-button{
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
    padding:5px!important;
    border-radius:18px!important;
  }
  body .account-info .account-profile-button #accountUsername,
  body .account-info .account-profile-button #mobileAccountUsername,
  body .account-info .account-profile-button .account-arrow{
    display:none!important;
  }
  body .account-info .account-profile-button #accountAvatar{
    width:44px!important;
    height:44px!important;
    border-radius:12px!important;
    margin:0!important;
  }
}

@media (max-width:360px){
  .sb-mobile-header-quick .sb-mobile-quick-link:nth-child(2){display:none!important}
  .sb-mobile-build-filter{grid-template-columns:1fr!important}
}

/* v109: mobile shell must never exist visually on desktop. */
@media (min-width:769px){
  .sb-mobile-brand,
  .sb-mobile-header-quick,
  .sb-mobile-menu-button,
  .sb-mobile-drawer-backdrop,
  .sb-mobile-drawer,
  .sb-mobile-build-filter{display:none!important;visibility:hidden!important;pointer-events:none!important}
  body.mobile-drawer-open{overflow:auto!important;touch-action:auto!important}
}
