/* ========================================================================
   BOMBARERA V101 — STORY / SURVIVAL FULL-WIDTH MODE PANELS
   Use the available viewport width instead of keeping a 1600/1640px desktop cap.
   The small edge gutter and the deliberate topbar -> hero gap remain.
   ======================================================================== */

#screenCampaign,
#screenSurvival{
  --bm101-edge:16px;
  --bm101-gap:12px;
}

/* Route topbars keep the Skins visual language, but no desktop max-width cap. */
html body.ui-v45[data-ui-context="story"] #screenCampaign > .campaign-header,
html body.ui-v45[data-ui-context="survival"] #screenSurvival > .campaign-header{
  box-sizing:border-box!important;
  width:calc(100% - (var(--bm101-edge) * 2))!important;
  max-width:none!important;
  margin:var(--bm101-edge) var(--bm101-edge) 0!important;
}

/* Content uses the same edge gutter and keeps the requested small vertical break. */
html body.ui-v45[data-ui-context="story"] #screenCampaign > .campaign-content,
html body.ui-v45[data-ui-context="survival"] #screenSurvival > .survival-content.survival-v89{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-top:var(--bm101-gap)!important;
  padding-right:var(--bm101-edge)!important;
  padding-bottom:10px!important;
  padding-left:var(--bm101-edge)!important;
}

/* Remove the old 1600px cinematic-shell cap that caused the large empty sides. */
html body.ui-v45[data-ui-context="story"] #screenCampaign .story-v93,
html body.ui-v45[data-ui-context="survival"] #screenSurvival .survival-v89__shell{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* The hero itself always consumes the full width of its content area. */
html body.ui-v45[data-ui-context="story"] #screenCampaign .story-v93__hero,
html body.ui-v45[data-ui-context="survival"] #screenSurvival .survival-v89__hero{
  width:100%!important;
  max-width:none!important;
}

@media (min-width:901px) and (max-height:760px){
  #screenCampaign,
  #screenSurvival{
    --bm101-edge:12px;
    --bm101-gap:9px;
  }
}

@media (max-width:900px){
  #screenCampaign,
  #screenSurvival{
    --bm101-edge:10px;
    --bm101-gap:9px;
  }
}

@media (max-width:520px){
  #screenCampaign,
  #screenSurvival{
    --bm101-edge:8px;
    --bm101-gap:8px;
  }
}