/* ========================================================================
   BOMBARERA BRAND SYSTEM V1 — 2026-10-04
   Shared logo / section identity + unique Skins showroom background.
   Loaded last so legacy passes cannot overwrite the brand geometry.
   ======================================================================== */

/* ---------- shared lockup ---------- */
.brand-lockup {
  --brand-cyan:#55efff;
  --brand-blue:#4c8dff;
  --brand-violet:#bd6cff;
  --brand-gold:#ffd663;
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  color:#fff !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  min-width:0 !important;
  isolation:isolate;
}
.brand-lockup__mark {
  position:relative;
  display:grid !important;
  place-items:center !important;
  width:40px;
  height:40px;
  flex:0 0 auto;
  border-radius:14px;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(145deg,rgba(26,80,160,.86),rgba(21,31,84,.98));
  border:1px solid rgba(107,199,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 7px 18px rgba(0,8,34,.25),
    0 0 20px rgba(69,209,255,.12);
}
.brand-lockup__mark::after {
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(85,239,255,.16),transparent 38%,rgba(189,108,255,.13));
}
.brand-lockup__mark img {
  width:82%;
  height:82%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.34));
}
.brand-lockup__word {
  display:inline-flex !important;
  align-items:baseline !important;
  gap:0 !important;
  font-family:'Exo 2',system-ui,sans-serif !important;
  font-style:normal !important;
  font-weight:950 !important;
  letter-spacing:-.055em !important;
  line-height:.92 !important;
  text-transform:uppercase !important;
  text-shadow:0 4px 14px rgba(0,0,0,.28);
}
.brand-lockup__word b,
.brand-lockup__word em {
  font:inherit !important;
  font-style:normal !important;
}
.brand-lockup__word b {
  color:#f9fbff;
}
.brand-lockup__word em {
  background:linear-gradient(90deg,var(--brand-cyan),#7ea2ff 45%,#d777ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-left:.03em;
}
.brand-lockup__tag {
  display:block;
  position:absolute;
  left:58px;
  top:calc(50% + 22px);
  color:rgba(194,220,255,.70);
  font:900 clamp(7px,.54vw,10px)/1 'Exo 2',system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- global application header ---------- */
.header .logo.brand-lockup--global {
  gap:8px !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.header .brand-lockup--global .brand-lockup__mark {
  width:34px;
  height:34px;
  border-radius:11px;
}
.header .brand-lockup--global .brand-lockup__word {
  font-size:clamp(.86rem,1.05vw,1.08rem) !important;
}

/* ---------- main menu logo ---------- */
body:has(#screenMenu:not(.hidden)) .brand-lockup--menu {
  position:absolute !important;
  left:2.2% !important;
  top:3.3% !important;
  z-index:46 !important;
  width:27.2% !important;
  height:9.1% !important;
  padding:0 1.0% !important;
  gap:clamp(8px,.8vw,14px) !important;
  border-radius:20px !important;
  pointer-events:auto !important;
  background:
    linear-gradient(105deg,rgba(5,17,49,.80),rgba(9,24,61,.58) 68%,rgba(9,24,61,.10));
  border:1px solid rgba(99,177,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
body:has(#screenMenu:not(.hidden)) .brand-lockup--menu .brand-lockup__mark {
  width:clamp(46px,4vw,66px) !important;
  height:clamp(46px,4vw,66px) !important;
  border-radius:clamp(14px,1.25vw,19px) !important;
  border-color:rgba(102,218,255,.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 10px 24px rgba(0,6,26,.28),
    0 0 28px rgba(71,212,255,.18) !important;
}
body:has(#screenMenu:not(.hidden)) .brand-lockup--menu .brand-lockup__word {
  font-size:clamp(22px,2.6vw,43px) !important;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.30));
}
body:has(#screenMenu:not(.hidden)) .brand-lockup--menu:hover .brand-lockup__mark {
  transform:translateY(-1px) rotate(-2deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 12px 26px rgba(0,6,26,.30),
    0 0 34px rgba(71,212,255,.26) !important;
}
body:has(#screenMenu:not(.hidden)) .brand-lockup--menu:hover .brand-lockup__word em {
  filter:brightness(1.12);
}

/* ---------- section header identity ---------- */
.campaign-header__identity {
  min-width:0;
  flex:1 1 auto;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}
.brand-lockup--section {
  flex:0 0 auto;
  gap:6px !important;
  opacity:.96;
}
.brand-lockup--section .brand-lockup__mark {
  width:28px;
  height:28px;
  border-radius:9px;
}
.brand-lockup--section .brand-lockup__word {
  font-size:clamp(.62rem,.74vw,.82rem) !important;
}
.campaign-header__divider {
  width:1px;
  height:24px;
  flex:0 0 auto;
  background:linear-gradient(180deg,transparent,rgba(113,176,255,.48),transparent);
}
.campaign-header__identity .campaign-header__title {
  flex:0 1 auto !important;
  margin:0 !important;
  white-space:nowrap !important;
}
.screen--campaign .campaign-header__identity .campaign-header__title { color:#79caff !important; }
.screen--survival .campaign-header__identity .campaign-header__title { color:#ff7d9b !important; }
.screen--achievements .campaign-header__identity .campaign-header__title { color:#ffd766 !important; }

/* ---------- skins: unique showroom environment ---------- */
body[data-ui-context="skins"] .screen--skins:not(.hidden)::before {
  background-image:url('../assets/skins/skins-showroom-bg-v2.svg') !important;
  background-size:cover !important;
  background-position:center !important;
  filter:none !important;
  opacity:1 !important;
}
body[data-ui-context="skins"] .screen--skins:not(.hidden)::after {
  background:
    linear-gradient(180deg,rgba(2,7,18,.24),rgba(2,7,18,.08) 34%,rgba(2,7,18,.26) 100%),
    radial-gradient(circle at 25% 44%,rgba(28,207,255,.065),transparent 36%),
    radial-gradient(circle at 82% 36%,rgba(155,91,255,.065),transparent 35%) !important;
}
body[data-ui-context="skins"] .skins-ref-v12__stage {
  background:
    linear-gradient(180deg,rgba(6,18,42,.28),rgba(4,12,30,.66)),
    url('../assets/skins/skins-showroom-bg-v2.svg') center 56% / 215% auto no-repeat !important;
}
body[data-ui-context="skins"] .skins-ref-v12__brand.brand-lockup-shell {
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
}
body[data-ui-context="skins"] .brand-lockup--skins {
  gap:6px !important;
}
body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__mark {
  width:38px;
  height:38px;
  border-radius:12px;
}
body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word {
  font-size:clamp(.92rem,1.25vw,1.28rem) !important;
}
body[data-ui-context="skins"] .skins-ref-v12__brand > strong,
body[data-ui-context="skins"] .skins-ref-v12__brand-bomb {
  display:none !important;
}

/* ---------- coherent surfaces across non-game pages ---------- */
body[data-ui-context="story"] .screen--campaign,
body[data-ui-context="survival"] .screen--survival,
body[data-ui-context="achievements"] .screen--achievements,
body[data-ui-context="skins"] .screen--skins {
  border-color:rgba(65,122,230,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 18px 52px rgba(0,4,20,.24) !important;
}
body[data-ui-context]:not([data-ui-context="menu"]):not([data-ui-context="game"]) .campaign-header {
  border-color:rgba(88,141,242,.20) !important;
  background:
    linear-gradient(100deg,rgba(9,24,58,.94),rgba(8,20,48,.90) 66%,rgba(17,28,68,.87)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}

@media (max-width:1180px) and (min-width:861px) {
  body:has(#screenMenu:not(.hidden)) .brand-lockup--menu { width:28% !important; }
  body:has(#screenMenu:not(.hidden)) .brand-lockup--menu .brand-lockup__tag { display:none; }
  .brand-lockup--section .brand-lockup__word { display:none !important; }
  .campaign-header__divider { display:none; }
}

@media (max-height:700px) and (min-width:861px) {
  body:has(#screenMenu:not(.hidden)) .brand-lockup--menu {
    top:2.7% !important;
    height:8.6% !important;
  }
  body:has(#screenMenu:not(.hidden)) .brand-lockup--menu .brand-lockup__tag { display:none; }
  body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__mark { width:31px;height:31px; }
}

@media (max-width:860px) {
  .campaign-header__identity { justify-content:flex-start !important; }
  .brand-lockup--section .brand-lockup__word { display:none !important; }
  .campaign-header__divider { display:none; }
  body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word { font-size:.86rem !important; }
}

@media (prefers-reduced-motion:reduce) {
  .brand-lockup *, .brand-lockup { transition:none !important; animation:none !important; }
}