/* ───────────────────────────────────────────────────────────────────────────
   Character Locker — bloodprairie.com integration overrides.

   styles.css and app.js are regenerated from the standalone build; keep any
   site-specific tweaks HERE so they survive an app update. Loaded AFTER
   styles.css, so these rules win.
   ─────────────────────────────────────────────────────────────────────────── */

/* Masthead: use the site's real wordmark logo instead of the CSS "black sun".
   The wordmark links back to the main site. */
.blacksun { display: none; }

.brand-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-decoration: none;
  color: inherit;
  border-radius: 2px;
}
.brand-link:hover .brandmark { opacity: 0.9; }
.brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.brandmark {
  height: 30px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* "Character Locker" descriptor under the wordmark — matches the app's label voice. */
.topbar .brand-link .s {
  font-family: "Courier Prime", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

/* A touch more headroom so the wordmark + label sit comfortably. */
.topbar .wrap { min-height: 64px; }

@media (max-width: 380px) {
  .brandmark { height: 26px; }
  .topbar .brand-link .s { letter-spacing: 0.18em; }
}