/* ========================================================================
   BOMBARERA V100 — UNIFIED ROUTE TOPBARS
   Skins is the visual reference for every meta-route top block.
   Story / Survival / Achievements now share the same inset rounded panel,
   control sizes, title lockup and compact context card.
   ======================================================================== */

:root{
  --bm100-route-gutter:clamp(10px,1.05vw,18px);
  --bm100-route-gap:12px;
  --bm100-route-max:1640px;
  --bm100-topbar-h:66px;
  --bm100-topbar-line:rgba(101,220,255,.24);
}

/* The route itself remains full-screen. Only the local section topbar is inset,
   exactly like the Skins topbar; the global Bombarera header stays full-width. */
html body.ui-v45[data-ui-context]:not([data-ui-context="menu"]):not([data-ui-context="skins"])
:is(#screenCampaign,#screenSurvival,#screenAchievements){
  padding:0!important;
}

html body.ui-v45[data-ui-context]:not([data-ui-context="menu"])
:is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header{
  box-sizing:border-box!important;
  position:relative!important;
  inset:auto!important;
  z-index:20!important;
  flex:0 0 var(--bm100-topbar-h)!important;
  width:calc(100% - (var(--bm100-route-gutter) * 2))!important;
  max-width:var(--bm100-route-max)!important;
  height:var(--bm100-topbar-h)!important;
  min-height:var(--bm100-topbar-h)!important;
  margin:var(--bm100-route-gutter) auto 0!important;
  padding:9px 12px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  overflow:hidden!important;
  border:1px solid var(--bm100-topbar-line)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 22% -40%,rgba(82,214,255,.18),transparent 38%),
    linear-gradient(180deg,rgba(10,28,57,.95),rgba(5,17,37,.97))!important;
  box-shadow:0 14px 36px rgba(0,7,22,.28),inset 0 1px 0 rgba(255,255,255,.07)!important;
  backdrop-filter:blur(16px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(130%)!important;
}

html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header::after{
  display:none!important;
  content:none!important;
}

/* Back button — same proportions as Skins. */
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header > .btn{
  width:auto!important;
  min-width:98px!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(122,205,255,.26)!important;
  border-radius:14px!important;
  background:rgba(4,15,33,.78)!important;
  color:#f3f9ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  font:1000 13px/1 'Exo 2',system-ui,sans-serif!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header > .btn .ui-icon{
  width:18px!important;height:18px!important;color:#8bdfff!important;
}
@media (hover:hover) and (pointer:fine){
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header > .btn:hover{
    transform:translateY(-1px)!important;
    border-color:rgba(99,224,255,.55)!important;
    background:rgba(10,31,58,.92)!important;
  }
}

/* Identity lockup — square route icon + title/subtitle, matching Skins. */
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header .campaign-header__identity{
  justify-self:start!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
}

html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements)
:is(.story-v93__section-icon,.survival-v89__section-icon,.achievements-v100__section-icon),
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements)
:is(.story-v93__section-icon.ui-icon,.survival-v89__section-icon.ui-icon,.achievements-v100__section-icon.ui-icon){
  box-sizing:border-box!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  flex:0 0 42px!important;
  padding:9px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(91,221,255,.35)!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,rgba(38,162,220,.28),rgba(87,67,205,.22))!important;
  color:#73e8ff!important;
  box-shadow:0 0 24px rgba(67,203,255,.10),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html body.ui-v45[data-ui-context="survival"] #screenSurvival .survival-v89__section-icon,
html body.ui-v45[data-ui-context="survival"] #screenSurvival .survival-v89__section-icon.ui-icon{
  border-color:rgba(255,104,154,.34)!important;
  background:linear-gradient(145deg,rgba(255,75,132,.23),rgba(111,72,205,.22))!important;
  color:#ff82a7!important;
}
html body.ui-v45[data-ui-context="achievements"] #screenAchievements .achievements-v100__section-icon,
html body.ui-v45[data-ui-context="achievements"] #screenAchievements .achievements-v100__section-icon.ui-icon{
  border-color:rgba(255,210,103,.32)!important;
  background:linear-gradient(145deg,rgba(255,196,70,.20),rgba(151,83,220,.20))!important;
  color:#ffd36b!important;
}

html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements)
:is(.story-v93__section-copy,.survival-v89__section-copy,.achievements-v100__section-copy){
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  min-width:0!important;
}
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements) .campaign-header__title{
  margin:0!important;
  color:#fff!important;
  font:1000 20px/1 'Exo 2',system-ui,sans-serif!important;
  letter-spacing:.01em!important;
  text-shadow:none!important;
  background:none!important;
  white-space:nowrap!important;
}
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements) .campaign-header__title::before{
  display:none!important;
  content:none!important;
}
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements) .mode-header__meta{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:#74dfff!important;
  font:900 8px/1.1 'Exo 2',system-ui,sans-serif!important;
  letter-spacing:.14em!important;
  white-space:nowrap!important;
}

/* Right context card — same size/rhythm as the Skins collection counter. */
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements)
:is(.story-v93__header-status,.survival-v89__header-status,.achievements-v100__header-status){
  box-sizing:border-box!important;
  justify-self:end!important;
  flex:0 0 auto!important;
  min-width:154px!important;
  height:46px!important;
  min-height:46px!important;
  padding:5px 12px 5px 9px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  border:1px solid rgba(106,217,255,.23)!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,rgba(29,116,158,.16),rgba(8,23,44,.86))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
html body.ui-v45[data-ui-context="survival"] #screenSurvival .survival-v89__header-status{
  border-color:rgba(255,102,151,.23)!important;
  background:linear-gradient(135deg,rgba(160,43,91,.14),rgba(8,23,44,.86))!important;
}
html body.ui-v45[data-ui-context="achievements"] #screenAchievements .achievements-v100__header-status{
  border-color:rgba(255,207,92,.24)!important;
  background:linear-gradient(135deg,rgba(154,112,33,.14),rgba(8,23,44,.86))!important;
}

html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival) :is(.story-v93__header-pulse,.survival-v89__header-pulse),
html body.ui-v45[data-ui-context="achievements"] #screenAchievements .achievements-v100__status-icon{
  box-sizing:border-box!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  flex:0 0 32px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
}
html body.ui-v45[data-ui-context="story"] #screenCampaign .story-v93__header-pulse{
  background:linear-gradient(145deg,rgba(74,210,255,.20),rgba(160,95,255,.18))!important;
  border:1px solid rgba(96,220,255,.20)!important;
  box-shadow:none!important;
}
html body.ui-v45[data-ui-context="survival"] #screenSurvival .survival-v89__header-pulse{
  background:linear-gradient(145deg,rgba(255,91,139,.22),rgba(153,81,220,.18))!important;
  border:1px solid rgba(255,104,154,.20)!important;
  box-shadow:none!important;
}
html body.ui-v45[data-ui-context="achievements"] #screenAchievements .achievements-v100__status-icon{
  padding:7px!important;
  color:#ffd36b!important;
  background:linear-gradient(145deg,rgba(255,204,77,.18),rgba(156,92,226,.17))!important;
}
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements)
:is(.story-v93__header-status,.survival-v89__header-status,.achievements-v100__header-status) > span:last-child{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements)
:is(.story-v93__header-status,.survival-v89__header-status,.achievements-v100__header-status) small{
  display:block!important;
  color:#79afc3!important;
  font:1000 7px/1 'Exo 2',system-ui,sans-serif!important;
  letter-spacing:.13em!important;
}
html body.ui-v45[data-ui-context]
:is(#screenCampaign,#screenSurvival,#screenAchievements)
:is(.story-v93__header-status,.survival-v89__header-status,.achievements-v100__header-status) strong{
  display:block!important;
  margin:0!important;
  color:#f4fbff!important;
  font:1000 12px/1 'Exo 2',system-ui,sans-serif!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
}

/* Preserve the deliberate visual break requested between topbar and content. */
html body.ui-v45[data-ui-context="story"] #screenCampaign > .campaign-content,
html body.ui-v45[data-ui-context="survival"] #screenSurvival > .survival-content.survival-v89{
  padding-top:var(--bm100-route-gap)!important;
}
html body.ui-v45[data-ui-context="achievements"] #screenAchievements{
  grid-template-rows:auto minmax(0,1fr)!important;
}
html body.ui-v45[data-ui-context="achievements"] #screenAchievements > .achievements-content{
  padding-top:var(--bm100-route-gap)!important;
}

/* Low-height desktop: compact the topbar without returning to the old strip. */
@media (min-width:901px) and (max-height:760px){
  :root{--bm100-route-gutter:9px;--bm100-route-gap:9px;--bm100-topbar-h:60px}
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header{
    padding:7px 10px!important;
    border-radius:17px!important;
  }
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header > .btn{
    height:42px!important;min-height:42px!important;
  }
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements)
  :is(.story-v93__section-icon,.survival-v89__section-icon,.achievements-v100__section-icon),
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements)
  :is(.story-v93__section-icon.ui-icon,.survival-v89__section-icon.ui-icon,.achievements-v100__section-icon.ui-icon){
    width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important;
  }
}

/* Tablet/mobile: same visual language, simpler composition. */
@media (max-width:900px){
  :root{--bm100-route-gutter:9px;--bm100-route-gap:9px;--bm100-topbar-h:60px}
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header{
    position:relative!important;
    top:auto!important;
    min-height:60px!important;
    height:auto!important;
    margin:9px auto 0!important;
    padding:7px 9px!important;
    border-radius:17px!important;
  }
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements)
  :is(.story-v93__header-status,.survival-v89__header-status,.achievements-v100__header-status){display:none!important}
}

@media (max-width:680px){
  :root{--bm100-route-gutter:7px;--bm100-route-gap:8px}
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header{
    width:calc(100% - 14px)!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:8px!important;
    padding:7px!important;
    border-radius:16px!important;
  }
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements) > .campaign-header > .btn{
    width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;font-size:0!important;
  }
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements)
  :is(.story-v93__section-icon,.survival-v89__section-icon,.achievements-v100__section-icon),
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements)
  :is(.story-v93__section-icon.ui-icon,.survival-v89__section-icon.ui-icon,.achievements-v100__section-icon.ui-icon){
    width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important;padding:8px!important;border-radius:12px!important;
  }
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements) .campaign-header__title{font-size:16px!important}
  html body.ui-v45[data-ui-context]
  :is(#screenCampaign,#screenSurvival,#screenAchievements) .mode-header__meta{font-size:8px!important;letter-spacing:.08em!important;white-space:normal!important}
}

/* The old Story/Survival status used a tiny standalone dot. In the unified
   card it becomes a compact icon tile with the original live accent inside. */
html body.ui-v45[data-ui-context="story"] #screenCampaign .story-v93__header-pulse::after,
html body.ui-v45[data-ui-context="survival"] #screenSurvival .survival-v89__header-pulse::after{
  content:"";
  width:8px;height:8px;border-radius:50%;display:block;
}
html body.ui-v45[data-ui-context="story"] #screenCampaign .story-v93__header-pulse::after{
  background:#62e8ff;box-shadow:0 0 12px rgba(98,232,255,.72);
}
html body.ui-v45[data-ui-context="survival"] #screenSurvival .survival-v89__header-pulse::after{
  background:#ff5b8b;box-shadow:0 0 12px rgba(255,91,139,.72);
}