/* SAB Helper — Global Mobile Responsive V2
   Replaces the first mobile-global.css.
   Loaded automatically by /js/header.js on all public pages.
*/

@media (max-width: 760px){
  html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  *,*::before,*::after{
    box-sizing:border-box;
  }

  img,svg,video,iframe{
    max-width:100%;
  }

  main{
    width:100% !important;
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
    padding-bottom:44px !important;
    overflow-x:hidden;
  }

  /* Breadcrumbs */
  .breadcrumb{
    width:100% !important;
    max-width:100% !important;
    padding:10px 12px 4px !important;
    font-size:11px !important;
    white-space:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .breadcrumb::-webkit-scrollbar{display:none}

  /* General hero */
  .hero{
    padding:24px 12px 14px !important;
    overflow:hidden;
  }
  .hero::before{
    max-width:100vw !important;
  }
  .hero h1{
    font-size:clamp(31px,10vw,46px) !important;
    line-height:1.02 !important;
    letter-spacing:0 !important;
    overflow-wrap:anywhere;
  }
  .hero p{
    font-size:14px !important;
    line-height:1.55 !important;
    max-width:34rem !important;
  }

  /* Current home hero */
  .home-hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100%;
    max-width:560px;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .home-hero-btn{
    width:100% !important;
    min-height:48px !important;
    padding:11px 14px !important;
    font-size:14px !important;
    border-radius:13px !important;
  }
  .home-hero-sub{
    padding:0 8px;
    line-height:1.55 !important;
  }

  /* Stats: 3 compact cards on first row, 2 on second.
     This removes the very tall 2+2+1 layout. */
  .stats-bar{
    width:min(100%,620px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:9px 10px 15px !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .stat-pill{
    grid-column:span 2;
    min-width:0 !important;
    width:auto !important;
    padding:9px 5px !important;
    border-radius:13px !important;
  }
  .stats-bar > .stat-pill:nth-child(4),
  .stats-bar > .stat-pill:nth-child(5){
    grid-column:span 3;
  }
  .stat-pill .num{
    font-size:21px !important;
    line-height:1.05 !important;
  }
  .stat-pill .lbl{
    font-size:8px !important;
    line-height:1.25 !important;
    letter-spacing:.45px !important;
  }

  /* Section headings */
  .section-title{
    font-size:clamp(20px,6.4vw,27px) !important;
    line-height:1.08 !important;
    margin:22px 0 11px !important;
    gap:8px !important;
    letter-spacing:0 !important;
  }
  .section-title::after{
    min-width:20px;
  }

  /* Toolbars / filters */
  .toolbar{
    width:100%;
    gap:6px !important;
    margin-bottom:12px !important;
    align-items:center !important;
  }
  .toolbar .search-box{
    flex:1 0 100% !important;
    width:100% !important;
    min-width:0 !important;
  }
  .search-box,
  input[type="search"],
  input[type="text"],
  input[type="number"],
  select,
  textarea{
    max-width:100% !important;
    font-size:16px !important; /* prevents browser auto zoom */
  }
  .search-box{
    min-height:44px !important;
    padding:10px 12px !important;
  }
  .filter-btn{
    flex:0 0 auto;
    min-height:36px;
    padding:7px 10px !important;
    font-size:10px !important;
  }

  /* Common content grids */
  .grid,
  .events-grid,
  .tips-grid,
  .home-info-grid,
  .home-checklist,
  .latest-guides-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .cards-grid{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  /* Override old inline desktop grids found across legacy pages */
  main [style*="grid-template-columns:repeat(auto-fit,minmax(250px"],
  main [style*="grid-template-columns: repeat(auto-fit,minmax(250px"],
  main [style*="grid-template-columns:repeat(auto-fill,minmax(260px"],
  main [style*="grid-template-columns: repeat(auto-fill,minmax(260px"],
  main [style*="grid-template-columns:repeat(auto-fit,minmax(230px"],
  main [style*="grid-template-columns: repeat(auto-fit,minmax(230px"],
  main [style*="grid-template-columns:repeat(auto-fit,minmax(220px"],
  main [style*="grid-template-columns: repeat(auto-fit,minmax(220px"],
  main [style*="grid-template-columns:repeat(auto-fill,minmax(200px"],
  main [style*="grid-template-columns: repeat(auto-fill,minmax(200px"]{
    grid-template-columns:1fr !important;
  }

  /* Home sections */
  #live-container,
  .home-hunt-inner{
    grid-template-columns:1fr !important;
  }
  .home-brainrot-hunt-v8{
    padding:16px !important;
    margin:18px 0 !important;
    border-radius:18px !important;
  }
  .home-bento{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .home-bento-card,
  .home-bento-card.feature,
  .home-bento-card.compact{
    min-height:0 !important;
    padding:16px !important;
  }
  .home-bento-card.feature .home-bento-copy h3{
    font-size:23px !important;
  }
  .home-bento-more{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .latest-guides-head{
    align-items:flex-start !important;
    gap:6px !important;
  }

  /* Exist Counts: compact 2-column database */
  #ec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  #ec-grid > *{
    min-width:0 !important;
  }

  /* Traits */
  #traits-grid{
    grid-template-columns:1fr !important;
  }

  /* Cards & editorial sections */
  .card,
  .article-section,
  .guide-card,
  .rank-card,
  .answer-box,
  .intro-box,
  .calc-card{
    max-width:100% !important;
    padding:14px !important;
    border-radius:14px !important;
  }
  .card p,
  .article-section p,
  .answer-box p,
  .intro-box{
    line-height:1.7 !important;
  }

  /* Tables: scroll inside their own area instead of widening the page */
  .table-wrap,
  main div[style*="overflow-x:auto"]{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  main table{
    max-width:none !important;
  }
  .bt{
    min-width:620px;
  }

  /* Trait ranking table and other old plain tables */
  main div[style*="overflow-x:auto"] > table{
    min-width:620px;
  }

  /* Related links stay compact instead of one huge card per row */
  .related-pages{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .rel-link{
    min-width:0 !important;
    padding:11px 8px !important;
    border-radius:12px !important;
  }
  .rel-link .rl-icon{
    font-size:20px !important;
  }
  .rel-link .rl-label{
    font-size:11px !important;
    overflow-wrap:anywhere;
  }
  .rel-link .rl-desc{
    font-size:8px !important;
  }

  /* Timeline/tier layouts */
  .tier-header{
    min-width:0 !important;
    padding:9px 10px !important;
    gap:8px !important;
  }
  .tier-label{
    min-width:auto !important;
  }
  .tier-desc{
    min-width:0 !important;
  }

  /* Footer */
  footer{
    padding-left:12px !important;
    padding-right:12px !important;
    font-size:11px !important;
    line-height:1.7 !important;
  }

  .online-users-counter span{
    max-width:100%;
    flex-wrap:wrap;
    justify-content:center;
  }

  .legal-wrap{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .legal-card{
    padding:14px !important;
    border-radius:14px !important;
  }
}

@media (max-width: 430px){
  main{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .hero{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .hero h1{
    font-size:clamp(29px,10vw,42px) !important;
  }

  .stats-bar{
    padding-left:8px !important;
    padding-right:8px !important;
    gap:6px !important;
  }
  .stat-pill{
    padding:8px 3px !important;
  }
  .stat-pill .num{
    font-size:19px !important;
  }
  .stat-pill .lbl{
    font-size:7.5px !important;
  }

  #ec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .home-bento-more{
    grid-template-columns:1fr !important;
  }
}
/* Mobile header patch — Steal a Brainrot Helper */
@media (max-width: 760px){
  html{scroll-padding-top:64px}
  header#site-header,
  #site-header{
    height:60px !important;
    min-height:60px !important;
    padding:0 12px !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    gap:8px !important;
    align-items:center !important;
    overflow:visible !important;
  }

  #site-header .logo{
    min-width:0 !important;
    max-width:170px !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
  }
  #site-header .logo img{
    height:42px !important;
    max-width:156px !important;
    width:auto !important;
    object-fit:contain !important;
    display:block !important;
  }

  #site-header nav{
    display:none !important;
  }

  #site-header .nav-burger{
    display:flex !important;
    width:46px !important;
    height:46px !important;
    margin-left:auto !important;
    border-radius:14px !important;
    border:1.5px solid rgba(148,163,184,.30) !important;
    background:rgba(22,24,38,.94) !important;
    box-shadow:0 8px 26px rgba(0,0,0,.30) !important;
    padding:0 11px !important;
  }
  #site-header .nav-burger span{
    height:3px !important;
    border-radius:99px !important;
    background:#f0f2ff !important;
  }

  .nav-drawer{
    width:min(88vw,360px) !important;
    background:linear-gradient(180deg,#101426,#0d0f1a) !important;
    border-left:1.5px solid rgba(148,163,184,.22) !important;
    padding-bottom:max(22px,env(safe-area-inset-bottom)) !important;
    box-shadow:-18px 0 60px rgba(0,0,0,.62) !important;
  }
  .nav-drawer-head{
    height:64px !important;
    padding:14px 16px !important;
    background:rgba(16,20,38,.98) !important;
    backdrop-filter:blur(16px) !important;
    border-bottom:1px solid rgba(148,163,184,.16) !important;
  }
  .nav-drawer-head span{
    font-size:20px !important;
    letter-spacing:.2px !important;
  }
  .nav-drawer-close{
    width:42px !important;
    height:42px !important;
    border-radius:13px !important;
    font-size:18px !important;
    color:#fff !important;
    background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.10) !important;
  }
  .nav-drawer a{
    min-height:52px !important;
    display:flex !important;
    align-items:center !important;
    padding:15px 18px !important;
    font-size:17px !important;
    font-weight:700 !important;
    border-bottom:1px solid rgba(148,163,184,.10) !important;
  }
  .nav-drawer a.active{
    color:#fff !important;
    background:linear-gradient(90deg,rgba(255,77,109,.20),rgba(124,58,237,.14)) !important;
    box-shadow:inset 4px 0 0 var(--accent) !important;
  }
  .nav-overlay{
    background:rgba(0,0,0,.70) !important;
    backdrop-filter:blur(2px) !important;
  }
}

@media (max-width: 380px){
  #site-header .logo img{height:38px !important;max-width:132px !important}
  #site-header .nav-burger{width:44px !important;height:44px !important}
}
/* Calculator mobile patch */
@media (max-width: 760px){
  body:has(#trade-main-grid) main{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #trade-main-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  #trade-bar-wrap{
    padding:14px 12px !important;
    border-radius:18px !important;
  }

  #tg-total,
  #tr-total{
    font-size:28px !important;
    line-height:1 !important;
  }

  #trade-verdict-top{
    font-size:18px !important;
    line-height:1.25 !important;
    text-align:center !important;
  }

  #tg-grid,
  #tr-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    min-height:auto !important;
  }

  .trade-card{
    border-radius:14px !important;
    min-height:0 !important;
  }

  .trade-card-bottom{
    padding:20px 6px 6px !important;
  }

  .trade-card-meta{
    font-size:10px !important;
    line-height:1.25 !important;
  }

  .trade-chip-label{
    max-width:58px !important;
  }

  #picker-modal{
    align-items:stretch !important;
    justify-content:flex-end !important;
    padding:8px !important;
    background:rgba(0,0,0,.78) !important;
  }
  #picker-modal > div{
    width:100% !important;
    max-width:none !important;
    max-height:calc(100dvh - 16px) !important;
    border-radius:20px 20px 16px 16px !important;
    padding:12px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #picker-search{
    font-size:16px !important;
    padding:12px 14px !important;
    border-radius:13px !important;
  }

  #picker-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    max-height:calc(100dvh - 170px) !important;
  }

  #picker-grid > *{
    min-width:0 !important;
  }

  #picker-step2{
    padding-bottom:84px !important;
  }

  #picker-detail > div{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  #picker-detail img{
    max-width:170px !important;
    max-height:170px !important;
    margin:0 auto !important;
    display:block !important;
  }

  #picker-detail h2,
  #picker-detail [style*="font-size:28px"]{
    font-size:25px !important;
    text-align:left !important;
  }

  #picker-detail [style*="grid-template-columns:repeat(3"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  #picker-detail [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  #detail-warning-box,
  #taco-preference-box{
    border-radius:14px !important;
    padding:11px !important;
    font-size:12px !important;
    line-height:1.55 !important;
  }

  #detail-mut,
  #detail-qty,
  #trait-ac-input{
    min-height:52px !important;
    font-size:16px !important;
    border-radius:14px !important;
  }

  #picker-detail button[onclick^="addToTrade"]{
    position:sticky !important;
    bottom:8px !important;
    z-index:30 !important;
    min-height:58px !important;
    border-radius:16px !important;
    font-size:18px !important;
    box-shadow:0 14px 36px rgba(0,0,0,.42) !important;
  }

  #value-report-modal{
    padding:10px !important;
    align-items:flex-end !important;
  }
  #value-report-modal > div{
    width:100% !important;
    max-width:none !important;
    max-height:92dvh !important;
    border-radius:20px 20px 16px 16px !important;
    padding:14px !important;
  }

  .calc-two-col{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  #inc-result > div{
    align-items:flex-start !important;
    gap:12px !important;
  }
  #inc-img{
    width:58px !important;
    height:58px !important;
  }
  #inc-val{
    font-size:27px !important;
  }
}

@media (max-width: 420px){
  #tg-grid,
  #tr-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #picker-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
/* SAB Helper — Brainrot Detail Mobile V2
   Fixes the very tall single-column stat layout on phones.
*/

@media (max-width: 760px){
  body:has(.detail-hero) main{
    width:100% !important;
    max-width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
    overflow-x:hidden !important;
  }

  body:has(.detail-hero) .breadcrumb{
    font-size:10px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  /* Turn the nested desktop hero into:
       [ image ] [ title + rarity ]
       [       compact stats       ]
     without changing the HTML. */
  .detail-hero{
    display:grid !important;
    grid-template-columns:88px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:11px !important;
    row-gap:11px !important;
    align-items:center !important;
    text-align:left !important;
    margin-bottom:14px !important;
    width:100% !important;
  }

  .detail-img{
    grid-column:1 !important;
    grid-row:1 !important;
    width:88px !important;
    height:88px !important;
    border-radius:15px !important;
    margin:0 !important;
  }

  .detail-info{
    display:contents !important;
  }

  .detail-info > div:first-child{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    margin:0 !important;
    align-self:center !important;
  }

  .detail-info h1{
    font-size:clamp(27px,8.5vw,39px) !important;
    line-height:.98 !important;
    margin:0 0 7px !important;
    overflow-wrap:anywhere !important;
  }

  .detail-info .rb{
    font-size:10px !important;
    padding:4px 7px !important;
  }

  /* Stats span the full mobile width below identity row */
  .detail-info > div[style*="grid-template-columns"],
  .detail-info [style*="grid-template-columns:repeat"]{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-top:0 !important;
  }

  .stat-card{
    min-width:0 !important;
    border-radius:12px !important;
    padding:9px 6px !important;
  }

  /* With five stats, keep the last one full width */
  .detail-info > div[style*="grid-template-columns"] > .stat-card:nth-child(5),
  .detail-info [style*="grid-template-columns:repeat"] > .stat-card:nth-child(5){
    grid-column:1 / -1 !important;
  }

  .stat-card .sc-label{
    font-size:8px !important;
    line-height:1.2 !important;
    letter-spacing:.4px !important;
    margin-bottom:3px !important;
  }

  .stat-card .sc-val{
    font-size:16px !important;
    line-height:1.1 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  /* Inline generated sections: About, mutations, similar Brainrots, FAQ */
  body:has(.detail-hero) main > div[style*="background:linear-gradient"]{
    width:100% !important;
    max-width:100% !important;
    padding:13px !important;
    margin-bottom:11px !important;
    border-radius:14px !important;
    overflow:hidden;
  }

  body:has(.detail-hero) main > div[style*="background:linear-gradient"] h2{
    font-size:18px !important;
    line-height:1.15 !important;
    margin-bottom:8px !important;
  }

  body:has(.detail-hero) main > div[style*="background:linear-gradient"] p,
  body:has(.detail-hero) main > div[style*="background:linear-gradient"] > div{
    font-size:12px;
    line-height:1.65 !important;
  }

  /* Older detail-section template */
  .detail-section{
    width:100% !important;
    max-width:100% !important;
    border-radius:14px !important;
    padding:13px !important;
    margin-bottom:11px !important;
    overflow:hidden !important;
  }
  .detail-section h2{
    font-size:18px !important;
    line-height:1.15 !important;
  }
  .detail-section p{
    font-size:12px !important;
    line-height:1.65 !important;
  }

  /* Mutation exist box */
  #mutation-exist-box{
    border-radius:14px !important;
    padding:12px !important;
    margin-bottom:11px !important;
  }
  #mutation-exist-box h2{font-size:18px !important}
  #mutation-exist-box p{font-size:11px !important}
  #mutation-exist-box div[style*="grid-template-columns:118px 1fr 96px"]{
    grid-template-columns:82px minmax(0,1fr) 66px !important;
    gap:6px !important;
    padding:7px 0 !important;
  }
  #mutation-exist-box strong,
  #mutation-exist-box div[style*="text-align:right"]{
    font-size:11px !important;
  }

  /* Mutation income table scrolls horizontally inside section */
  .mut-table{
    min-width:560px !important;
    width:560px !important;
  }
  .mut-table th,
  .mut-table td{
    padding:7px 7px !important;
    font-size:10px !important;
  }
  .detail-section:has(.mut-table),
  body:has(.detail-hero) main div[style*="overflow-x:auto"]{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Similar Brainrots */
  .sim-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .sim-card{
    min-width:0 !important;
    border-radius:12px !important;
    padding:8px !important;
  }
  .sim-card img{
    width:50px !important;
    height:50px !important;
  }
  .sim-card .sc-name{
    font-size:10px !important;
    overflow-wrap:anywhere !important;
  }
  .sim-card .sc-price{
    font-size:8px !important;
  }

  /* Related pages */
  body:has(.detail-hero) .related-pages{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    margin:14px 0 !important;
  }

  .detail-cta{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }
  .detail-cta a,
  .detail-cta button{
    width:100% !important;
    min-height:44px !important;
  }
}

@media (max-width: 390px){
  .detail-hero{
    grid-template-columns:78px minmax(0,1fr) !important;
    column-gap:9px !important;
  }

  .detail-img{
    width:78px !important;
    height:78px !important;
    border-radius:13px !important;
  }

  .detail-info h1{
    font-size:clamp(25px,8.2vw,34px) !important;
  }

  /* IMPORTANT: keep two stat columns even on small phones.
     The old V1 rule forced one column and made pages extremely long. */
  .detail-info > div[style*="grid-template-columns"],
  .detail-info [style*="grid-template-columns:repeat"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .stat-card{
    padding:8px 4px !important;
  }
  .stat-card .sc-val{
    font-size:15px !important;
  }
}