/* ========================================================================
   BOMBARERA V98 — STORY + SURVIVAL / FULL-WIDTH HEADERS + REAL HERO GAP
   The header stays full width. The breathing room where the old accent line
   lived is created by CONTENT PADDING (not header margin), so flex layout and
   shared shell rules cannot collapse/override it.
   ======================================================================== */

#screenCampaign,
#screenSurvival{
  --bm98-hero-gap:14px;
  --bm98-hero-x:16px;
}

/* Global Bombarera header remains edge-to-edge. */
@media (min-width:761px){
  body.ui-v45[data-ui-context="story"]:not([data-ui-context="menu"]):not(:has(#screenGame:not(.hidden))) > .header,
  body.ui-v45[data-ui-context="survival"]:not([data-ui-context="menu"]):not(:has(#screenGame:not(.hidden))) > .header{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:12px clamp(18px,1.45vw,28px)!important;
    border-radius:0!important;
    justify-content:space-between!important;
  }

  body.ui-v45[data-ui-context="story"]:not([data-ui-context="menu"]):not(:has(#screenGame:not(.hidden))) > .header > .header__brand,
  body.ui-v45[data-ui-context="survival"]:not([data-ui-context="menu"]):not(:has(#screenGame:not(.hidden))) > .header > .header__brand{
    margin-left:0!important;
    margin-right:auto!important;
  }

  body.ui-v45[data-ui-context="story"]:not([data-ui-context="menu"]):not(:has(#screenGame:not(.hidden))) > .header > .header__right,
  body.ui-v45[data-ui-context="survival"]:not([data-ui-context="menu"]):not(:has(#screenGame:not(.hidden))) > .header > .header__right{
    margin-left:auto!important;
    margin-right:0!important;
  }
}

/* Mode header also remains a full-width strip. No inset card, no fake gap. */
#screenCampaign > .campaign-header.story-v93__header,
#screenSurvival > .campaign-header.survival-v89__header{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* REAL gap: starts the cinematic content lower than the mode header. */
#screenCampaign > .campaign-content,
#screenSurvival > .survival-content.survival-v89{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-top:var(--bm98-hero-gap)!important;
  padding-right:var(--bm98-hero-x)!important;
  padding-bottom:10px!important;
  padding-left:var(--bm98-hero-x)!important;
}

#screenCampaign .story-v93,
#screenSurvival .survival-v89__shell{
  width:min(1600px,100%)!important;
  max-width:1600px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* V95 clean seam stays clean. */
#screenCampaign .story-v93__hero::after,
#screenSurvival .survival-v89__hero::after{
  display:none!important;
  content:none!important;
}

@media (min-width:901px) and (max-height:760px){
  #screenCampaign,
  #screenSurvival{
    --bm98-hero-gap:10px;
    --bm98-hero-x:12px;
  }
}

@media (max-width:900px){
  #screenCampaign,
  #screenSurvival{
    --bm98-hero-gap:10px;
    --bm98-hero-x:10px;
  }

  #screenCampaign > .campaign-header.story-v93__header,
  #screenSurvival > .campaign-header.survival-v89__header{
    width:100%!important;
    margin:0!important;
    border-radius:0!important;
  }
}

@media (max-width:760px){
  body.ui-v45[data-ui-context="story"]:not([data-ui-context="menu"]):not(:has(#screenGame:not(.hidden))) > .header,
  body.ui-v45[data-ui-context="survival"]:not([data-ui-context="menu"]):not(:has(#screenGame:not(.hidden))) > .header{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:9px 12px!important;
    border-radius:0!important;
    justify-content:space-between!important;
  }
}

@media (max-width:520px){
  #screenCampaign,
  #screenSurvival{
    --bm98-hero-gap:8px;
    --bm98-hero-x:8px;
  }
}