/* RoarSoar v192 — mobile shell only. Desktop v191 is untouched. */
.rs-mobile-top,
.rs-mobile-build,
.rs-mobile-drawer,
.rs-mobile-overlay,
.rs-mobile-board-hint{display:none}

@media (max-width:768px){
  html,body{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* Replace desktop navigation with one compact mobile header. */
  .v175-topbar,.topbar,.rs-topbar,
  .v175-brandwrap,.brandwrap,.rs-brand,
  .v175-sidebar,.sidebar,.rs-canonical-nav,.builder-leftnav,
  body > .rs-build-banner{
    display:none!important;
  }

  .rs-mobile-top{
    display:flex;
    position:sticky;
    top:0;
    z-index:3000;
    height:44px;
    align-items:center;
    justify-content:space-between;
    padding:0 11px;
    background:#050b12;
    border-bottom:1px solid #182834;
  }
  .rs-mobile-logo{
    color:#fff;
    font:900 19px/1 Arial,Helvetica,sans-serif;
    letter-spacing:-.5px;
  }
  .rs-mobile-logo span{color:#39ddd6}
  .rs-mobile-menu-button{
    appearance:none;
    border:1px solid #27404b;
    background:#091720;
    color:#eaf5f8;
    width:34px;height:30px;
    border-radius:7px;
    font-size:20px;
    line-height:27px;
    cursor:pointer;
  }

  /* A compact, always-visible Build My Board prompt. */
  .rs-mobile-build{
    display:flex;
    position:sticky;
    top:44px;
    z-index:2990;
    min-height:58px;
    align-items:center;
    gap:7px;
    padding:6px 8px;
    background:#071018;
    border-bottom:1px solid #1a303a;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .rs-mobile-build::-webkit-scrollbar{display:none}
  .rs-mobile-build-label{
    color:#fff;
    font:700 10px/1 Arial,Helvetica,sans-serif;
    white-space:nowrap;
    margin-right:1px;
  }
  .rs-mobile-build-card{
    display:flex;
    flex:0 0 126px;
    height:44px;
    gap:6px;
    align-items:center;
    padding:4px 6px;
    color:#eaf4f7;
    text-decoration:none;
    background:#0b1821;
    border:1px solid #223945;
    border-radius:7px;
  }
  .rs-mobile-build-card img{
    width:48px;height:32px;
    object-fit:cover;
    border-radius:4px;
    flex:0 0 auto;
  }
  .rs-mobile-build-card b{
    display:block;
    font:700 9px/1.05 Arial,Helvetica,sans-serif;
  }
  .rs-mobile-build-card small{
    display:block;
    color:#879eaa;
    font:7px/1.1 Arial,Helvetica,sans-serif;
    margin-top:2px;
  }

  /* Slide-out menu. */
  .rs-mobile-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:3990;
    background:rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  .rs-mobile-overlay.open{opacity:1;pointer-events:auto}
  .rs-mobile-drawer{
    display:block;
    position:fixed;
    z-index:4000;
    left:0;top:0;
    width:min(82vw,285px);
    height:100vh;
    transform:translateX(-103%);
    transition:transform .2s ease;
    background:#06111a;
    border-right:1px solid #223945;
    overflow-y:auto;
    padding:8px 7px 22px;
  }
  .rs-mobile-drawer.open{transform:translateX(0)}
  .rs-mobile-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:38px;
    padding:0 5px 6px;
    border-bottom:1px solid #1a303a;
    margin-bottom:5px;
  }
  .rs-mobile-drawer-close{
    border:0;background:transparent;color:#eaf4f7;
    font-size:23px;cursor:pointer;
  }
  .rs-mobile-drawer a{
    display:flex!important;
    align-items:center!important;
    min-height:34px!important;
    width:100%!important;
    margin:0!important;
    padding:8px 9px!important;
    color:#dce8ed!important;
    text-decoration:none!important;
    font:10.5px/1.1 Arial,Helvetica,sans-serif!important;
    border-radius:6px!important;
    white-space:normal!important;
    background:transparent!important;
    border:0!important;
  }
  .rs-mobile-drawer a:hover{background:#10232e!important;color:#fff!important}
  .rs-mobile-drawer .create,
  .rs-mobile-drawer .builder-create{
    border:1px solid #2fc7cf!important;
    color:#63e6eb!important;
    margin:4px 0!important;
  }

  /* Remove desktop left-column geometry. */
  .v175-shell,.shell,.page-shell,.main-shell,.builder-shell{
    display:block!important;
    grid-template-columns:1fr!important;
    margin:0!important;
    margin-left:0!important;
    padding:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .v175-main,.main,.content,.page-content{
    margin:0!important;
    margin-left:0!important;
    padding-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* SDG artwork remains high resolution. Do NOT shrink it to phone width.
     The board area itself becomes horizontally swipeable. */
  .v175-main{
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .board-stage,.board{
    width:980px!important;
    max-width:none!important;
    min-width:980px!important;
    margin:0!important;
  }
  .board-art,.art{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
  }
  .rs-mobile-board-hint{
    display:block;
    position:sticky;
    left:0;
    width:100vw;
    padding:4px 9px;
    background:#08141c;
    border-bottom:1px solid #18303a;
    color:#8fa7b3;
    font:8px/1.2 Arial,Helvetica,sans-serif;
    letter-spacing:.02em;
  }

  /* Newsfeed / card-based sections: two columns on ordinary phones. */
  .feed,.card-grid,.cards,.news-grid,.article-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-count:auto!important;
    gap:7px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }

  /* Keep horizontally-scrolling chips/filters compact. */
  .filters,.filter-row,.categories,.category-row,.tabs,.tag-row{
    overflow-x:auto!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
  }
  .filters::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  .categories::-webkit-scrollbar,
  .category-row::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .tag-row::-webkit-scrollbar{display:none}

  /* Thin mobile scrollbars only where scrolling is actually needed. */
  *{scrollbar-width:thin;scrollbar-color:#50616b transparent}
  *::-webkit-scrollbar{width:4px;height:4px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:#50616b;border-radius:999px}
}

@media (max-width:420px){
  .feed,.card-grid,.cards,.news-grid,.article-grid{
    grid-template-columns:1fr!important;
  }
  .board-stage,.board{
    width:900px!important;
    min-width:900px!important;
  }
}


/* V193 — make the global mobile Build My Board previews look like desktop chooser cards */
@media(max-width:768px){
  .rs-mobile-build{
    min-height:60px!important;
    padding:7px 8px!important;
    gap:7px!important;
    background:#06111b!important;
    border-bottom:1px solid #173543!important;
  }
  .rs-mobile-build-label{
    font-size:10px!important;
    color:#9fb8c4!important;
  }
  .rs-mobile-build-card{
    flex:0 0 142px!important;
    height:45px!important;
    padding:5px 7px!important;
    gap:7px!important;
    border:1px solid #294657!important;
    border-radius:9px!important;
    background:#0b1b27!important;
  }
  .rs-mobile-build-card:first-of-type{
    border-color:#44ddd7!important;
    box-shadow:0 0 0 2px rgba(68,221,215,.12)!important;
  }
  .rs-mobile-build-card img{
    width:58px!important;
    height:38px!important;
    object-fit:cover!important;
    border:1px solid #35505e!important;
    border-radius:5px!important;
  }
  .rs-mobile-build-card b{
    font-size:10px!important;
    line-height:1.05!important;
  }
  .rs-mobile-build-card small{
    font-size:7px!important;
    line-height:1.05!important;
    color:#8fa8b5!important;
  }
}