/* Vynumo — environment branding.
 *
 * Two identities from one markup tree. Visibility is driven by the
 * `data-mode` attribute set before first paint (js/vynumo-env.js +
 * js/vynumo-theme-boot.js), so nothing is rewritten or re-rendered by JS and
 * there is never a flash of the wrong brand.
 *
 *   html[data-mode="standalone"]   -> [data-bc-only] hidden
 *   html[data-mode="bloodcrimes"]  -> [data-standalone-only] hidden
 */

/* Default (no JS, unknown mode): show the standalone identity. BloodCrimes copy
 * appears only when the mode was positively resolved to bloodcrimes. */
html:not([data-mode="bloodcrimes"]) [data-bc-only] { display: none !important; }
html[data-mode="bloodcrimes"] [data-standalone-only] { display: none !important; }

/* ------------------------------------------------------------ header lockup */

/* Full-width BloodCrimes brand row under the logo + mode pills. The header is a
 * tight single row at 390px, so the brand line wraps onto its own row instead of
 * squeezing the mode pills. */
html[data-mode="bloodcrimes"] .game-header {
  flex-wrap: wrap;
  row-gap: 2px;
}

.header-brand-sub {
  flex: 1 0 100%;
  display: block;
  text-align: left;
  margin-top: 1px;
  font-family: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  font-size: 0.62rem;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A3A3A3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-brand-sub b {
  color: #E0BD73;
  font-weight: 700;
}

/* The VYNUMO wordmark in BloodCrimes mode keeps its shape but adopts the
   BloodCrimes crimson/gold identity. */
html[data-mode="bloodcrimes"] .header-title {
  color: #F4F4F5;
  text-shadow: 0 0 18px rgba(181, 18, 32, 0.35);
}

html[data-mode="bloodcrimes"] .header-logo img {
  filter: drop-shadow(0 0 10px rgba(181, 18, 32, 0.4));
}

/* --------------------------------------------------------------- hero copy */

/* BloodCrimes hero kicker: same slot as "NUMBER MERGE PUZZLE". */
html[data-mode="bloodcrimes"] .hero-kicker {
  color: #E0BD73;
}

html[data-mode="bloodcrimes"] .hero-tagline {
  color: #C9C9CE;
}

/* Underground Arcade eyebrow: a small crimson rule so the game reads as an
   Arcade cabinet rather than a generic landing page. */
.bc-arcade-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-family: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A3A3A3;
}

.bc-arcade-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, #B51220, #C99A38);
}

@media (max-width: 380px) {
  .header-brand-sub { font-size: 0.55rem; letter-spacing: 0.1em; }
}