/* ========================================================================
   BOMBARERA V104 — ROUTE TOPBARS: REAL VIEWPORT WIDTH
   The V100 selector had higher specificity than V102/V103, so its 1640px
   max-width kept winning despite later !important declarations.
   This layer deliberately outranks that selector and aligns the route bar
   with the full-width Story / Survival cinematic canvas.
   ======================================================================== */

:root{
  --bm104-route-edge:16px;
  --bm104-route-gap:12px;
}

/* Higher specificity than route-topbars-v100.css.
   Keep the Skins-style panel, but remove the desktop width cap. */
html body.ui-v45[data-ui-context] #app.app #screenCampaign.screen > .campaign-header.story-v93__header,
html body.ui-v45[data-ui-context] #app.app #screenSurvival.screen > .campaign-header.survival-v89__header,
html body.ui-v45[data-ui-context] #app.app #screenAchievements.screen > .campaign-header.achievements-v100__header{
  box-sizing:border-box!important;
  width:calc(100% - (var(--bm104-route-edge) * 2))!important;
  max-width:none!important;
  margin:var(--bm104-route-edge) var(--bm104-route-edge) 0!important;
}

/* Story / Survival hero uses the exact same horizontal grid. */
html body.ui-v45[data-ui-context] #app.app #screenCampaign.screen > .campaign-content,
html body.ui-v45[data-ui-context] #app.app #screenSurvival.screen > .survival-content.survival-v89{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-top:var(--bm104-route-gap)!important;
  padding-right:var(--bm104-route-edge)!important;
  padding-left:var(--bm104-route-edge)!important;
}

html body.ui-v45[data-ui-context] #app.app #screenCampaign.screen .story-v93,
html body.ui-v45[data-ui-context] #app.app #screenSurvival.screen .survival-v89__shell,
html body.ui-v45[data-ui-context] #app.app #screenCampaign.screen .story-v93__hero,
html body.ui-v45[data-ui-context] #app.app #screenSurvival.screen .survival-v89__hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media (min-width:901px) and (max-height:760px){
  :root{--bm104-route-edge:12px;--bm104-route-gap:9px}
}

@media (max-width:900px){
  :root{--bm104-route-edge:10px;--bm104-route-gap:9px}
}

@media (max-width:520px){
  :root{--bm104-route-edge:8px;--bm104-route-gap:8px}
}