/* V156 STLBEAST no-image logo fallback
   Guarantees a visible STLBEAST logo even if image loading, MIME type, cache, or path fails. */

:root{
  --stlb156-blue:#25c7ff;
  --stlb156-purple:#9d58ff;
  --stlb156-bg:#030914;
  --stlb156-line:rgba(37,199,255,.30);
}

.stlb156-logo-fallback{
  display:inline-grid!important;
  grid-template-columns:auto auto!important;
  grid-template-rows:auto auto!important;
  align-items:end!important;
  column-gap:3px!important;
  min-width:176px!important;
  padding:8px 10px!important;
  border-radius:14px!important;
  background:
    radial-gradient(circle at 8% 35%,rgba(37,199,255,.18),transparent 36%),
    linear-gradient(180deg,rgba(5,12,24,.96),rgba(2,7,15,.98))!important;
  border:1px solid var(--stlb156-line)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04), 0 0 22px rgba(37,199,255,.10)!important;
  line-height:1!important;
  text-decoration:none!important;
  vertical-align:middle!important;
  position:relative!important;
  overflow:hidden!important;
}

.stlb156-logo-fallback::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg,transparent 0 35%,rgba(37,199,255,.10) 48%,transparent 62%),
    radial-gradient(circle at 90% 0%,rgba(157,88,255,.16),transparent 35%);
  pointer-events:none;
}

.stlb156-mark,
.stlb156-beast{
  position:relative;
  z-index:1;
  font-family:Impact,Haettenschweiler,"Arial Black",system-ui,sans-serif!important;
  font-size:clamp(1.55rem,2.4vw,2.25rem)!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  text-transform:uppercase!important;
  text-shadow:0 0 18px rgba(37,199,255,.25),0 2px 0 rgba(0,0,0,.5)!important;
}

.stlb156-mark{
  color:#f5fbff!important;
}

.stlb156-beast{
  color:var(--stlb156-blue)!important;
}

.stlb156-logo-fallback small{
  position:relative;
  z-index:1;
  grid-column:1 / -1!important;
  margin-top:2px!important;
  color:#bcecff!important;
  font-family:Arial,system-ui,sans-serif!important;
  font-size:.58rem!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* If the PNG/WEBP image loads, keep it primary and suppress the fallback next to it. */
img[src*="stlbeast-premium-header-logo-v146"]:not([style*="display: none"]) + .stlb156-logo-fallback{
  display:none!important;
}

/* If the image fails and onerror hides it, fallback becomes visible. */
img[src*="stlbeast-premium-header-logo-v146"][style*="display: none"] + .stlb156-logo-fallback{
  display:inline-grid!important;
}

/* Header anchor sizing must fit fallback cleanly. */
.v140-logo,
.stlb125-brand,
.logo.clean-wordmark,
.v114-logo.clean-wordmark,
.stlb147-logo-frame,
.v104-brand{
  min-width:0!important;
  min-height:0!important;
  width:auto!important;
  height:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:0!important;
}

/* If a page still collapses image/logo area, fallback stays readable. */
header .stlb156-logo-fallback,
footer .stlb156-logo-fallback{
  flex:0 0 auto!important;
}

@media(max-width:760px){
  .stlb156-logo-fallback{
    min-width:155px!important;
    padding:7px 9px!important;
  }
  .stlb156-mark,
  .stlb156-beast{
    font-size:1.55rem!important;
  }
  .stlb156-logo-fallback small{
    font-size:.50rem!important;
  }
}