/* ============================================================
   Realm Gates — refined-minimal, cinematic navy + gold
   Display: Fraunces (warm serif) · Body: Hanken Grotesk
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&family=Pixelify+Sans:wght@400;500;600;700&display=swap');

/* Minecraft-style pixel font, used for thematic accents (eyebrows, tags) */
:root { --sb-font-pixel: "Pixelify Sans", "VT323", monospace; }

/* ---------------------------------------------------------- *
 * 1. Color scheme (maps onto Material internals)
 * ---------------------------------------------------------- */
[data-md-color-scheme="summerbuddies"] {
  --sb-navy-950: #060c1d;
  --sb-navy-900: #081127;
  --sb-navy-800: #0b1733;
  --sb-navy-700: #102046;
  --sb-navy-600: #173063;
  --sb-line:     rgba(212, 175, 55, 0.16);
  --sb-line-soft: rgba(232, 236, 245, 0.08);

  --sb-gold:     #e8c45a;
  --sb-gold-deep:#c8a23f;
  --sb-gold-soft: rgba(232, 196, 90, 0.14);

  --sb-ink:      #eef1f8;
  --sb-ink-body: #c4cde2;
  --sb-ink-dim:  #8a96b6;

  --sb-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.75);
  --sb-shadow-hover: 0 28px 60px -22px rgba(0, 0, 0, 0.85);

  /* Material mappings */
  --md-primary-fg-color:        var(--sb-navy-900);
  --md-primary-fg-color--light: var(--sb-navy-700);
  --md-primary-fg-color--dark:  var(--sb-navy-950);
  --md-primary-bg-color:        var(--sb-ink);
  --md-accent-fg-color:         var(--sb-gold);

  --md-default-bg-color:        var(--sb-navy-900);
  --md-default-fg-color:        var(--sb-ink);
  --md-default-fg-color--light: var(--sb-ink-body);
  --md-default-fg-color--lighter: var(--sb-ink-dim);
  --md-default-fg-color--lightest: rgba(232, 236, 245, 0.1);

  --md-typeset-color:           var(--sb-ink-body);
  --md-typeset-a-color:         var(--sb-gold);

  --md-code-bg-color:           #0a1430;
  --md-code-fg-color:           #e7ecf8;
  /* admonitions: Material reads these — without them text fell back to dark-on-dark */
  --md-admonition-fg-color:     var(--sb-ink-body);
  --md-admonition-bg-color:     rgba(16, 32, 70, 0.45);
  --md-footer-bg-color:         var(--sb-navy-950);
  --md-footer-bg-color--dark:   var(--sb-navy-950);

  color-scheme: dark;
}

/* ---------------------------------------------------------- *
 * 2. Atmosphere: gradient mesh + grain
 * ---------------------------------------------------------- */
[data-md-color-scheme="summerbuddies"] body {
  background-color: var(--sb-navy-950);
  background-image:
    radial-gradient(1100px 600px at 12% -8%, rgba(232, 196, 90, 0.10), transparent 60%),
    radial-gradient(900px 700px at 95% 0%, rgba(23, 48, 99, 0.55), transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(16, 32, 70, 0.6), transparent 60%);
  background-attachment: fixed;
}
/* subtle film grain over everything */
[data-md-color-scheme="summerbuddies"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.md-main, .md-header, .md-footer { position: relative; z-index: 1; }

/* Wider, airier content column */
.md-grid { max-width: 72rem; }

/* ---------------------------------------------------------- *
 * 3. Typography
 * ---------------------------------------------------------- */
[data-md-color-scheme="summerbuddies"] body,
.md-typeset { font-family: "Hanken Grotesk", system-ui, sans-serif; }

[data-md-color-scheme="summerbuddies"] .md-typeset h1,
[data-md-color-scheme="summerbuddies"] .md-typeset h2,
[data-md-color-scheme="summerbuddies"] .md-typeset h3,
.md-header__title {
  font-family: "Fraunces", Georgia, serif;
  letter-spacing: -0.01em;
}
[data-md-color-scheme="summerbuddies"] .md-typeset h1 {
  color: #fff;
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.12;
  margin-bottom: 0.4em;
}
[data-md-color-scheme="summerbuddies"] .md-typeset h2 {
  color: var(--sb-ink);
  font-weight: 600;
  margin-top: 2.4em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--sb-line-soft);
}
[data-md-color-scheme="summerbuddies"] .md-typeset h3 {
  color: var(--sb-gold);
  font-weight: 600;
}
.md-header__title { font-weight: 700; font-size: 1.05rem; }
.md-header { border-bottom: 1px solid var(--sb-line); backdrop-filter: blur(8px); background: rgba(8, 17, 39, 0.85) !important; }

/* links */
[data-md-color-scheme="summerbuddies"] .md-typeset a { color: var(--sb-gold); text-decoration: none; transition: color .2s ease; }
[data-md-color-scheme="summerbuddies"] .md-typeset a:hover { color: #fff; }

/* ---------------------------------------------------------- *
 * 4. Nav tabs — minimal, gold underline on active
 * ---------------------------------------------------------- */
.md-tabs { background: transparent; border-bottom: 1px solid var(--sb-line-soft); }
.md-tabs__link { opacity: .8; font-weight: 500; transition: opacity .2s ease; }
.md-tabs__link:hover { opacity: 1; }
.md-tabs__item--active .md-tabs__link { opacity: 1; color: var(--sb-gold); }
[data-md-color-scheme="summerbuddies"] .md-nav__link--active,
[data-md-color-scheme="summerbuddies"] .md-nav__item--active > .md-nav__link { color: var(--sb-gold); font-weight: 600; }

/* ---------------------------------------------------------- *
 * 5. Inline code / tables / admonitions
 * ---------------------------------------------------------- */
[data-md-color-scheme="summerbuddies"] .md-typeset code {
  background: #0a1430;
  color: var(--sb-gold);
  border: 1px solid var(--sb-line-soft);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}
[data-md-color-scheme="summerbuddies"] .md-typeset table:not([class]) {
  border: 1px solid var(--sb-line-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
[data-md-color-scheme="summerbuddies"] .md-typeset table:not([class]) th {
  background: var(--sb-navy-700);
  color: var(--sb-gold);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 600;
  border: none;
}
[data-md-color-scheme="summerbuddies"] .md-typeset table:not([class]) td { border-top: 1px solid var(--sb-line-soft); }
[data-md-color-scheme="summerbuddies"] .md-typeset .admonition,
[data-md-color-scheme="summerbuddies"] .md-typeset details {
  border: 1px solid var(--sb-line-soft);
  border-left: 3px solid var(--sb-gold);
  border-radius: 12px;
  background: rgba(16, 32, 70, 0.45);
  color: var(--sb-ink-body);
  box-shadow: var(--sb-shadow);
}
[data-md-color-scheme="summerbuddies"] .md-typeset .admonition-title,
[data-md-color-scheme="summerbuddies"] .md-typeset summary {
  color: #fff;
  background-color: rgba(232, 196, 90, 0.10);
}
[data-md-color-scheme="summerbuddies"] .md-typeset .admonition p,
[data-md-color-scheme="summerbuddies"] .md-typeset .admonition li,
[data-md-color-scheme="summerbuddies"] .md-typeset details p,
[data-md-color-scheme="summerbuddies"] .md-typeset details li { color: var(--sb-ink-body); }

/* ---------------------------------------------------------- *
 * 6. Buttons
 * ---------------------------------------------------------- */
[data-md-color-scheme="summerbuddies"] .md-typeset .md-button {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 600;
  color: var(--sb-gold);
  border: 1px solid var(--sb-gold);
  border-radius: 999px;
  padding: 0.55em 1.4em;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
[data-md-color-scheme="summerbuddies"] .md-typeset .md-button:hover {
  background: var(--sb-gold);
  color: var(--sb-navy-950);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(232, 196, 90, 0.5);
}
[data-md-color-scheme="summerbuddies"] .md-typeset .md-button--primary {
  background: linear-gradient(180deg, var(--sb-gold), var(--sb-gold-deep));
  color: var(--sb-navy-950);
  border-color: var(--sb-gold);
}

/* ---------------------------------------------------------- *
 * 7. HERO (homepage)
 * ---------------------------------------------------------- */
.sb-hero {
  position: relative;
  margin: -1.2rem -0.8rem 2.4rem;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--sb-line);
  background: var(--sb-navy-900);
  box-shadow: var(--sb-shadow);
}
.sb-hero::before { /* the Realm Gates portal artwork behind the title */
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Path is relative to THIS stylesheet — resolves the same in every browser (incl. Firefox),
     unlike a relative url() stored in a custom property. */
  background:
    linear-gradient(100deg, rgba(7,12,29,0.84) 0%, rgba(7,12,29,0.5) 38%, rgba(7,12,29,0.16) 66%, rgba(7,12,29,0.34) 100%),
    url("../assets/hero-portal.webp") center/cover no-repeat,
    radial-gradient(circle at 70% 30%, #1a1040, #060c1d);
  filter: saturate(1.05);
}
.sb-hero > * { position: relative; z-index: 1; }
.sb-hero::after { /* gold hairline glow at the base */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--sb-gold), transparent);
  opacity: .7;
}
.sb-hero__eyebrow {
  font-family: var(--sb-font-pixel);
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.92rem;
  font-weight: 600; color: var(--sb-gold);
  animation: sb-fade-up .6s ease both;
}
.sb-hero h1.sb-hero__title {
  font-family: "Fraunces", serif; font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02;
  color: #fff; margin: 0.25em 0 0.3em; border: none;
  text-shadow: 0 2px 28px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
  animation: sb-fade-up .6s ease .08s both;
}
.sb-hero__title .sb-amp { color: var(--sb-gold); font-style: italic; }
.sb-hero p.sb-hero__lede {
  max-width: 40ch; font-size: 1.12rem; color: var(--sb-ink-body); line-height: 1.6;
  text-shadow: 0 1px 14px rgba(0,0,0,0.7);
  animation: sb-fade-up .6s ease .16s both;
}
.sb-hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem;
  animation: sb-fade-up .6s ease .24s both; }

@keyframes sb-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- *
 * 8. Section eyebrow heading
 * ---------------------------------------------------------- */
.sb-eyebrow {
  font-family: var(--sb-font-pixel);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.9rem;
  font-weight: 600; color: var(--sb-gold); margin: 2.6rem 0 0.2rem;
}
.md-typeset .sb-section-title {
  font-family: "Fraunces", serif; font-weight: 600; color: #fff;
  font-size: 1.7rem; margin: 0.1rem 0 0.6rem; border: none; padding: 0;
}
.sb-foot { text-align: center; color: var(--sb-ink-dim); font-size: 0.8rem; line-height: 1.6; margin: 1rem 0 2rem; }

/* ---------------------------------------------------------- *
 * 9. Feature cards (start-here / custom features)
 * ---------------------------------------------------------- */
.sb-cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 1.2rem 0 2rem;
}
.sb-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.4rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(16, 32, 70, 0.6), rgba(8, 17, 39, 0.6));
  border: 1px solid var(--sb-line-soft);
  color: var(--sb-ink-body);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease;
}
.sb-card:hover { transform: translateY(-4px); border-color: var(--sb-line); box-shadow: var(--sb-shadow-hover); }
.sb-card .sb-card__icon {
  display: block; width: 34px; height: 34px; margin-bottom: 0.1rem;
  background-repeat: no-repeat; background-position: left center; background-size: contain;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.sb-card:hover .sb-card__icon { transform: translateY(-2px) scale(1.06); }
.sb-card h3 { margin: 0; color: #fff; font-family: "Fraunces", serif; }
a.sb-card { text-decoration: none; }
a.sb-card h3 { transition: color .2s ease; }
a.sb-card:hover h3 { color: var(--sb-gold); }

/* ---------------------------------------------------------- *
 * 10. MOD CARDS (image-forward, link cards)
 * ---------------------------------------------------------- */
.mod-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin: 1.4rem 0 2.4rem;
}
.mod-card {
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; text-decoration: none;
  background: linear-gradient(180deg, rgba(16, 32, 70, 0.55), rgba(8, 17, 39, 0.7));
  border: 1px solid var(--sb-line-soft);
  box-shadow: var(--sb-shadow);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease;
  position: relative;
}
.mod-card:hover { transform: translateY(-6px); border-color: var(--sb-gold); box-shadow: var(--sb-shadow-hover); }

.mod-card__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--sb-navy-600), var(--sb-navy-900));
  display: flex; align-items: center; justify-content: center;
}
.mod-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.mod-card:hover .mod-card__media img { transform: scale(1.07); }
/* icon-only mods: render the square icon centered, not stretched */
.mod-card__media.is-icon img { width: 56%; height: auto; object-fit: contain; border-radius: 14px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.8); }
/* placeholder badge for mods without art */
.mod-card__media.is-empty { font-family: "Fraunces", serif; font-size: 2.4rem; color: var(--sb-gold); }
.mod-card__media::after { /* gradient floor for legibility */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 17, 39, 0.85));
}
.mod-card__tier {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  font-family: var(--sb-font-pixel);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sb-navy-950); background: var(--sb-gold);
  padding: 0.12em 0.6em; border-radius: 999px;
}
/* "All dimensions" — universal mods: outline gold (distinct from a solid Dimension pill) */
.mod-card__tier--all {
  background: rgba(8, 17, 39, 0.78); color: var(--sb-gold);
  border: 1px solid var(--sb-gold); backdrop-filter: blur(2px);
}
/* "Coming soon" — muted */
.mod-card__tier--soon {
  background: rgba(138, 150, 182, 0.22); color: var(--sb-ink); border: 1px solid var(--sb-line-soft);
}
/* "Unassigned" — mod not yet pinned to a realm. Neutral, never gold/Aincrad.
   Quiet navy chip so it reads as "no realm yet", not as a feature. */
.mod-card__tier--unassigned {
  background: rgba(8, 17, 39, 0.72); color: var(--sb-ink-dim);
  border: 1px dashed rgba(232, 236, 245, 0.22); backdrop-filter: blur(2px);
}

/* Locked / coming-soon card: dimmed, dashed, no hover lift, not interactive */
.mod-card.is-soon {
  border-style: dashed; border-color: var(--sb-line); opacity: 0.92; cursor: default;
}
.mod-card.is-soon:hover { transform: none; border-color: var(--sb-line); box-shadow: var(--sb-shadow); }
.mod-card.is-soon .mod-card__media { filter: grayscale(0.5) brightness(0.8); }
.mod-card.is-soon .mod-card__media.is-empty { color: var(--sb-ink-dim); filter: none; }
.mod-card.is-soon:hover .mod-card__h { color: #fff; }
.mod-card__body { padding: 0.85rem 1rem 1.05rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.mod-card__h {
  margin: 0; font-family: "Fraunces", serif; font-size: 1.12rem; font-weight: 600; color: #fff;
  transition: color .2s ease;
}
.mod-card:hover .mod-card__h { color: var(--sb-gold); }
.mod-card__p { margin: 0; font-size: 0.86rem; color: var(--sb-ink-body); line-height: 1.45; }
.mod-card__link {
  margin-top: auto; padding-top: 0.6rem; font-size: 0.74rem; font-weight: 600;
  color: var(--sb-ink-dim); display: inline-flex; align-items: center; gap: 0.3rem;
  transition: color .2s ease;
}
.mod-card:hover .mod-card__link { color: var(--sb-gold); }

/* ---------------------------------------------------------- *
 * 11. Page banner strip (tier / custom page tops)
 * ---------------------------------------------------------- */
.sb-banner {
  position: relative; margin: 0 0 1.8rem; border-radius: 18px; overflow: hidden;
  min-height: 200px; display: flex; align-items: flex-end;
  border: 1px solid var(--sb-line);
  background-size: cover; background-position: center;
  box-shadow: var(--sb-shadow);
}
.sb-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,12,29,.2) 20%, rgba(6,12,29,.92));
}
.sb-banner__inner { position: relative; z-index: 1; padding: 1.4rem 1.6rem; }
.sb-banner__inner .sb-eyebrow { margin: 0 0 0.2rem; }
.sb-banner__inner h1 { margin: 0; border: none; }

/* ---------------------------------------------------------- *
 * 12. Misc polish
 * ---------------------------------------------------------- */
[data-md-color-scheme="summerbuddies"] .md-search__input { background: rgba(255,255,255,0.07); border-radius: 10px; }
[data-md-color-scheme="summerbuddies"] .md-search__input::placeholder { color: var(--sb-ink-dim); }
[data-md-color-scheme="summerbuddies"] ::selection { background: var(--sb-gold-soft); color: #fff; }
[data-md-color-scheme="summerbuddies"] .md-footer-meta { background: var(--sb-navy-950); }
/* slim gold scrollbar */
[data-md-color-scheme="summerbuddies"] * { scrollbar-color: var(--sb-gold-deep) transparent; }

/* ---------------------------------------------------------- *
 * 13. Digital corruption — something is unmaking the realms.
 *     A glitchy data-rot creeping in from the left & right edges.
 * ---------------------------------------------------------- */
[data-md-color-scheme="summerbuddies"] .md-header { z-index: 10; }

/* Concepts banner pulses with an unstable magenta/cyan glow */
@keyframes sb-banner-flicker {
  0%, 100% { box-shadow: var(--sb-shadow); }
  48%      { box-shadow: var(--sb-shadow); }
  50%      { box-shadow: var(--sb-shadow), 3px 0 14px rgba(232,64,120,.4), -3px 0 14px rgba(64,200,232,.3); }
  52%      { box-shadow: var(--sb-shadow); }
}
.sb-banner--glitch { animation: sb-banner-flicker 5s steps(12) infinite; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   PIXEL THEME  (added 2026-06-07)
   A Minecraft-pixel skin over the modern layout. Pixel font on
   all display/UI chrome; body copy stays in the readable sans.
   ⟲ To revert to the elegant look: delete this whole block.
   ============================================================ */
[data-md-color-scheme="summerbuddies"] .md-typeset h1,
[data-md-color-scheme="summerbuddies"] .md-typeset h2,
[data-md-color-scheme="summerbuddies"] .md-typeset h3,
.md-header__title,
.md-tabs__link,
.sb-hero h1.sb-hero__title,
.md-typeset .sb-section-title,
.sb-banner__inner h1,
.mod-card__h,
.sb-card h3,
[data-md-color-scheme="summerbuddies"] .md-typeset .md-button {
  font-family: var(--sb-font-pixel) !important;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.sb-hero h1.sb-hero__title { line-height: 1.08; font-weight: 600; }
.sb-hero__title .sb-amp { font-style: normal; }
.md-tabs__link { font-size: 0.82rem; }

/* Blocky (pixel) corners everywhere */
.sb-hero, .sb-banner, .sb-card, .mod-card, .mod-card__media,
[data-md-color-scheme="summerbuddies"] .md-typeset .admonition,
[data-md-color-scheme="summerbuddies"] .md-typeset details,
[data-md-color-scheme="summerbuddies"] .md-typeset table:not([class]),
[data-md-color-scheme="summerbuddies"] .md-typeset .md-button,
[data-md-color-scheme="summerbuddies"] .md-search__input {
  border-radius: 4px !important;
}
.mod-card__tier { border-radius: 3px !important; }

/* Minecraft slot/panel bevel on cards & buttons */
.sb-card, .mod-card {
  box-shadow: var(--sb-shadow), inset 1px 1px 0 rgba(255,255,255,0.06), inset -2px -2px 0 rgba(0,0,0,0.45);
}
.sb-card:hover, .mod-card:hover {
  box-shadow: var(--sb-shadow-hover), inset 1px 1px 0 rgba(255,255,255,0.08), inset -2px -2px 0 rgba(0,0,0,0.5);
}
[data-md-color-scheme="summerbuddies"] .md-typeset .md-button {
  border-width: 2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.22), inset -2px -2px 0 rgba(0,0,0,0.32);
}

/* ============================================================
   "COMING SOON" release banner  (home hero)
   Pixel arcade marquee: gold ticker label + neutral release line.
   Hard edges, dithered top rule, blinking pixel dot — reads like a
   game's title screen, stays legible & on-brand (navy + gold).
   ============================================================ */
.sb-soon {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem;
  margin: 0 0 1.6rem; padding: .7rem .95rem;
  background:
    linear-gradient(180deg, rgba(16,32,70,.55), rgba(8,17,39,.78));
  border: 2px solid var(--sb-line);
  box-shadow: var(--sb-shadow),
              inset 1px 1px 0 rgba(255,255,255,.06),
              inset -2px -2px 0 rgba(0,0,0,.45);
  /* dithered top edge — corruption nibbling at the marquee */
  background-image:
    repeating-linear-gradient(90deg,
      var(--sb-gold) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, rgba(16,32,70,.55), rgba(8,17,39,.78));
  background-size: 100% 2px, 100% 100%;
  background-repeat: no-repeat;
  background-position: top left, center;
}
/* the gold "COMING SOON" pill — pixel ticker */
.sb-soon__tag {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--sb-font-pixel);
  font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sb-navy-950); background: var(--sb-gold);
  padding: .18em .6em; border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.22);
  white-space: nowrap;
}
/* blinking pixel dot — step animation, square (no blur) */
.sb-soon__dot {
  width: .5em; height: .5em; background: var(--sb-navy-950);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  animation: sb-soon-blink 1.2s steps(1) infinite;
}
@keyframes sb-soon-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: .15; } }
/* the release line — readable sans, dim, with a pixel arrow accent */
.sb-soon__text {
  font-size: .9rem; color: var(--sb-ink-body); line-height: 1.3;
}
.sb-soon__text strong { color: var(--sb-ink); font-weight: 600; }
.sb-soon__text .sb-soon__lead {
  font-family: var(--sb-font-pixel); color: var(--sb-gold);
  font-size: .92rem; letter-spacing: .02em; margin-right: .15em;
}
@media (prefers-reduced-motion: reduce) {
  .sb-soon__dot { animation: none; opacity: 1; }
}

/* Crisp, crunchy rendering for the small mod logos */
.mod-card__media.is-icon img { image-rendering: pixelated; }

/* ---- Card icons (gold line-art, replaces generic emoji) ---- */
.sb-ico-install { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v11%27%2F%3E%3Cpath%20d%3D%27M7%2010l5%205%205-5%27%2F%3E%3Cpath%20d%3D%27M5%2020h14%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-voice { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%279%27%20y%3D%273%27%20width%3D%276%27%20height%3D%2711%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M5%2011a7%207%200%200%200%2014%200%27%2F%3E%3Cpath%20d%3D%27M12%2018v3%27%2F%3E%3Cpath%20d%3D%27M8%2021h8%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-concepts { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2019V5a2%202%200%200%201%202-2h13v14H6a2%202%200%200%200-2%202z%27%2F%3E%3Cpath%20d%3D%27M4%2019a2%202%200%200%200%202%202h13%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-dimensions { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2712%27%20rx%3D%275.5%27%20ry%3D%279%27%2F%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2712%27%20rx%3D%272%27%20ry%3D%274%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-translate { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2011.5a8.5%208.5%200%200%201-12.3%207.6L3%2021l1.9-5.7A8.5%208.5%200%201%201%2021%2011.5z%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%2711.5%27%20r%3D%27.8%27%20fill%3D%27%23e8c45a%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2711.5%27%20r%3D%27.8%27%20fill%3D%27%23e8c45a%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2715.5%27%20cy%3D%2711.5%27%20r%3D%27.8%27%20fill%3D%27%23e8c45a%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-gates { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2021V8a7%207%200%200%201%2014%200v13%27%2F%3E%3Cpath%20d%3D%27M4%2021h16%27%2F%3E%3Cpath%20d%3D%27M9%2021v-9a3%203%200%200%201%206%200v9%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-companion { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M3.5%2020a5.5%205.5%200%200%201%2011%200%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%279.5%27%20r%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M14.5%2020a4.5%204.5%200%200%201%207-3.8%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-update { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2011a8%208%200%201%200-2.3%205.6%27%2F%3E%3Cpath%20d%3D%27M20%204v6h-6%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-server { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l8%203v5.5c0%204.8-3.4%207.7-8%208.8-4.6-1.1-8-4-8-8.8V6z%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-custom { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l1.8%205.5L19%2010l-5.2%201.6L12%2017l-1.8-5.4L5%2010l5.2-1.5z%27%2F%3E%3C%2Fsvg%3E"); }

.mod-card__media.is-lock { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%2714%27%20height%3D%279%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2011V8a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:center; background-size:46px; }

/* ============================================================
   14. MOD DETAIL PAGE — clickable hero (the image opens the
       official mod page; the rest of the page is the friendly,
       in-wiki write-up). Added 2026-06-07.
   ============================================================ */
.mod-hero {
  position: relative; display: flex; align-items: flex-end;
  height: clamp(210px, 30vw, 300px); margin: 0 0 .4rem; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--sb-line); box-shadow: var(--sb-shadow);
  background-color: var(--sb-navy-800);
  text-decoration: none; cursor: pointer;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease;
}
.mod-hero:hover { border-color: var(--sb-gold); box-shadow: var(--sb-shadow-hover); transform: translateY(-3px); }
.mod-hero::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,12,29,.25) 18%, rgba(6,12,29,.93)); }
.mod-hero__inner { position: relative; z-index: 2; padding: 1.4rem 1.6rem; width: 100%; }
.mod-hero__inner .sb-eyebrow { margin: 0 0 .2rem; }
.mod-hero__inner h1 { margin: 0; border: none; color: #fff; }
.mod-hero__cta {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem;
  font-family: var(--sb-font-pixel); font-size: .8rem; font-weight: 600; letter-spacing: .03em;
  color: var(--sb-navy-950); background: var(--sb-gold);
  padding: .3em .8em; border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.mod-hero:hover .mod-hero__cta { transform: translateX(3px); }
/* icon / plain variants: centre a square logo (or glyph) on a navy field */
.mod-hero--icon, .mod-hero--plain {
  background-image: radial-gradient(circle at 50% 38%, var(--sb-navy-600), var(--sb-navy-900));
}
.mod-hero__art { position: absolute; inset: 0; z-index: 1; }
/* banner pages: the artwork fills the hero and is cropped (never tiled) */
.mod-hero__art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* icon / plain pages: centre a small square logo (or glyph) on a navy field */
.mod-hero--icon .mod-hero__art, .mod-hero--plain .mod-hero__art {
  display: flex; align-items: center; justify-content: center; padding-bottom: 3.2rem; }
.mod-hero--icon .mod-hero__art > img {
  width: 124px; height: 124px; object-fit: contain; border-radius: 16px;
  image-rendering: pixelated; box-shadow: 0 14px 30px -12px rgba(0,0,0,.85); }
.mod-hero--plain .mod-hero__art { font-size: 3.6rem; color: var(--sb-gold); opacity: .55; }
/* little hint line under the hero */
.mod-hero-note { font-size: .78rem; color: var(--sb-ink-dim); margin: .25rem 0 1.5rem; }
.mod-hero-note::before { content: "↑ "; color: var(--sb-gold); }
/* friendly "where you'll meet them" creature tables read better a touch tighter */
.md-typeset .mod-creatures td:first-child { font-weight: 600; color: var(--sb-ink); }

/* inline legend dots (used in the catalogue intro to explain the tier pills) */
.sb-tier-dot { display: inline-block; width: .7em; height: .7em; border-radius: 2px;
  margin: 0 .15em -.02em 0; vertical-align: middle; }
.sb-tier-dot--aincrad { background: var(--sb-gold); }
.sb-tier-dot--all { background: rgba(8,17,39,.78); border: 1px solid var(--sb-gold); }
.sb-tier-dot--unassigned { background: rgba(8,17,39,.78); border: 1px dashed rgba(232,236,245,.32); }

/* ============================================================
   PRE-RELEASE LOCK GATE  (added 2026-06-07)
   Used while the modpack is "Coming soon": the install page shows
   a locked panel instead of the real instructions, and the
   "1 · Install" card renders disabled.
   ⟲ RESTORE ON RELEASE: see install.md (uncomment the real
     instructions, delete the gate). This CSS block can stay — it
     is inert once no .sb-lock / .is-locked markup is on the page.
   ============================================================ */

/* The big locked panel that replaces the install body */
.sb-lock {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1rem; margin: 1.8rem 0 1.4rem; padding: 2.6rem 1.6rem 2.4rem;
  border: 2px solid var(--sb-line);
  background:
    repeating-linear-gradient(90deg, var(--sb-gold) 0 3px, transparent 3px 6px),
    radial-gradient(circle at 50% 0%, rgba(23,48,99,.6), transparent 70%),
    linear-gradient(180deg, rgba(16,32,70,.55), rgba(8,17,39,.82));
  background-size: 100% 2px, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: top left, center, center;
  box-shadow: var(--sb-shadow),
              inset 1px 1px 0 rgba(255,255,255,.06),
              inset -2px -2px 0 rgba(0,0,0,.45);
}
/* the padlock glyph — square pixel field with the gold lock icon */
.sb-lock__icon {
  width: 64px; height: 64px; display: block;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%2714%27%20height%3D%279%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2011V8a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E")
    center / 40px no-repeat,
    var(--sb-gold-soft);
  border: 2px solid var(--sb-line);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.05), inset -2px -2px 0 rgba(0,0,0,.4);
}
/* the gold "LOCKED" pixel pill */
.sb-lock__tag {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--sb-font-pixel);
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sb-navy-950); background: var(--sb-gold);
  padding: .2em .7em; border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.22);
}
.sb-lock__tag .sb-soon__dot { background: var(--sb-navy-950); }
.md-typeset .sb-lock__title {
  font-family: var(--sb-font-pixel) !important;
  color: #fff; font-weight: 600; letter-spacing: .02em;
  font-size: 1.6rem; margin: .2rem 0 0; border: none; padding: 0;
}
.sb-lock__text {
  max-width: 46ch; color: var(--sb-ink-body); line-height: 1.6; font-size: .95rem; margin: 0;
}
.sb-lock__text strong { color: var(--sb-ink); font-weight: 600; }
/* the "release date soon" sub-line — pixel arrow accent, dim */
.sb-lock__note {
  font-family: var(--sb-font-pixel); color: var(--sb-gold);
  font-size: .95rem; letter-spacing: .02em; margin: .1rem 0 0;
}
.sb-lock__note::before { content: "▸ "; }

/* Disabled / locked feature card (non-clickable "1 · Install") */
.sb-card--locked {
  cursor: not-allowed; opacity: .55;
  filter: grayscale(.35);
}
.sb-card--locked:hover { transform: none; border-color: var(--sb-line-soft); }
.sb-card--locked:hover .sb-card__icon { transform: none; }
/* gold "Soon" pixel chip pinned to the locked card */
.sb-card__lock {
  align-self: flex-start; margin-top: .15rem;
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sb-font-pixel);
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sb-gold); background: var(--sb-gold-soft);
  border: 1px solid var(--sb-line);
  padding: .12em .55em; border-radius: 3px;
}
.sb-card__lock::before {
  content: ""; width: .85em; height: .85em; display: inline-block;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%2714%27%20height%3D%279%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2011V8a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ============================================================
   15. CODEX — the "Concepts" page laid out as an RPG bestiary.
       Acts (themed groups) → entries (icon + pixel title + category
       chip + preserved prose, optional 16:9 art). Reuses the navy
       slot/bevel language of .mod-card; pixel chrome, modern body.
       Added 2026-06-07.
   ============================================================ */

/* ---- Act header: pixel numeral + serif/pixel act title ---- */
.sb-act {
  display: flex; align-items: baseline; gap: .8rem;
  margin: 3rem 0 .2rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--sb-line-soft);
}
.sb-act:first-of-type { margin-top: 1.6rem; }
.sb-act__num {
  font-family: var(--sb-font-pixel);
  font-size: .9rem; font-weight: 600; letter-spacing: .12em;
  color: var(--sb-navy-950); background: var(--sb-gold);
  padding: .1em .5em; border-radius: 3px; line-height: 1.2;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.22);
}
.sb-act__meta { display: flex; flex-direction: column; gap: .1rem; }
.sb-act__eyebrow {
  font-family: var(--sb-font-pixel);
  text-transform: uppercase; letter-spacing: .14em; font-size: .76rem;
  font-weight: 600; color: var(--sb-gold); margin: 0;
}
.md-typeset .sb-act__title {
  font-family: var(--sb-font-pixel) !important;
  color: #fff; font-weight: 500; letter-spacing: .01em;
  font-size: 1.5rem; margin: 0; border: none; padding: 0;
}

/* ---- Codex grid + entries ---- */
.sb-codex { display: flex; flex-direction: column; gap: 1.1rem; margin: 1.2rem 0 1rem; }
.sb-codex__entry {
  display: grid;
  grid-template-columns: 200px 1fr;        /* art rail + body */
  border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, rgba(16,32,70,.55), rgba(8,17,39,.7));
  border: 1px solid var(--sb-line-soft);
  box-shadow: var(--sb-shadow), inset 1px 1px 0 rgba(255,255,255,.06), inset -2px -2px 0 rgba(0,0,0,.45);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease;
}
.sb-codex__entry:hover {
  transform: translateY(-3px); border-color: var(--sb-line);
  box-shadow: var(--sb-shadow-hover), inset 1px 1px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.5);
}
/* entries with no art collapse to a single column */
.sb-codex__entry--noart { grid-template-columns: 1fr; }

/* art rail (left): 16:9-ish crop, gold hairline on the inner edge */
.sb-codex__media {
  position: relative; overflow: hidden; min-height: 100%;
  background: radial-gradient(circle at 50% 40%, var(--sb-navy-600), var(--sb-navy-900));
  border-right: 1px solid var(--sb-line-soft);
}
.sb-codex__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.sb-codex__entry:hover .sb-codex__media img { transform: scale(1.06); }
.sb-codex__media::after {        /* navy floor so the seam reads clean */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(8,17,39,.55));
}

/* body (right) */
.sb-codex__body { padding: 1.2rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; }
.sb-codex__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.sb-codex__ico {
  flex: none; width: 30px; height: 30px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.md-typeset .sb-codex__title {
  font-family: var(--sb-font-pixel) !important;
  color: #fff; font-weight: 500; font-size: 1.12rem; letter-spacing: .01em;
  margin: 0; border: none; padding: 0; line-height: 1.2;
}
/* category chip — World / Power / Danger / Social */
.sb-codex__cat {
  margin-left: auto;
  font-family: var(--sb-font-pixel);
  font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: .14em .6em; border-radius: 3px; white-space: nowrap;
  border: 1px solid var(--sb-line);
}
.sb-codex__cat--world  { color: var(--sb-gold); background: var(--sb-gold-soft); }
.sb-codex__cat--power  { color: #ffe6a3; background: rgba(232,196,90,.20); border-color: var(--sb-gold-deep); }
.sb-codex__cat--danger { color: #ffb3c4; background: rgba(232,64,120,.16); border-color: rgba(232,64,120,.38); }
.sb-codex__cat--social { color: #a9d8ff; background: rgba(64,160,232,.16); border-color: rgba(64,160,232,.38); }
/* entry prose — readable sans; first <p> sits tight under the head */
.md-typeset .sb-codex__body > p { margin: 0; color: var(--sb-ink-body); line-height: 1.6; }
.md-typeset .sb-codex__body > p + p { margin-top: .55rem; }

/* ---- Companion class mini-grid (4 roles) ---- */
.sb-class-grid {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: .35rem 0 .1rem;
}
.sb-class {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .8rem; border-radius: 3px;
  background: rgba(8,17,39,.55);
  border: 1px solid var(--sb-line-soft);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.04), inset -1px -1px 0 rgba(0,0,0,.35);
}
.sb-class__glyph { font-size: 1.3rem; line-height: 1; margin-bottom: .15rem; filter: saturate(.9); }
.sb-class__name {
  font-family: var(--sb-font-pixel);
  font-size: .92rem; font-weight: 600; letter-spacing: .02em; color: var(--sb-gold);
}
.sb-class__role { font-size: .78rem; color: var(--sb-ink-dim); line-height: 1.35; }

/* ---- Responsive: stack art above body on narrow screens ---- */
@media (max-width: 720px) {
  .sb-codex__entry { grid-template-columns: 1fr; }
  .sb-codex__media { min-height: 0; aspect-ratio: 16 / 7; border-right: none; border-bottom: 1px solid var(--sb-line-soft); }
  .sb-codex__media::after { background: linear-gradient(180deg, transparent 55%, rgba(8,17,39,.55)); }
  .sb-codex__cat { margin-left: 0; }   /* let it sit after the title, not pushed away */
}

/* ---- New gold line-art icons for codex entries ---- */
.sb-ico-corruption { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%202L4%2013h6l-1%209%209-12h-6z%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-waystone { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2021V8l5-5%205%205v13%27%2F%3E%3Cpath%20d%3D%27M5%2021h14%27%2F%3E%3Cpath%20d%3D%27M12%2010v6%27%2F%3E%3Cpath%20d%3D%27M9.5%2013h5%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-pictos { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M17.5%2014v7M14%2017.5h7%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-magic { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%204l5%205L9%2020l-5%201%201-5z%27%2F%3E%3Cpath%20d%3D%27M14%205l5%205%27%2F%3E%3Cpath%20d%3D%27M18%202l.6%201.4L20%204l-1.4.6L18%206l-.6-1.4L16%204l1.4-.6z%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-trinkets { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2715%27%20r%3D%275%27%2F%3E%3Cpath%20d%3D%27M9.5%2010.5L7%204h10l-2.5%206.5%27%2F%3E%3C%2Fsvg%3E"); }
.sb-ico-dragon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%208l4-2%202%203%206-3%204%202-3%204%203%204-6-1-3%203-2-4-4-1z%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%279.5%27%20r%3D%27.7%27%20fill%3D%27%23e8c45a%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }

/* ============================================================
   16. MODS BROWSE PAGE — live search + faceted filter bar.
       Pixel chrome (search affordance, chips, count) over the
       existing .mod-grid. Reuses navy/gold tokens + slot bevel.
       Added 2026-06-08.
   ============================================================ */

/* The whole control panel: search + two chip rows + count. */
.sb-filter {
  margin: 1.6rem 0 1.4rem;
  padding: 1rem 1.05rem .95rem;
  border: 2px solid var(--sb-line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(16,32,70,.5), rgba(8,17,39,.74));
  box-shadow: var(--sb-shadow),
              inset 1px 1px 0 rgba(255,255,255,.06),
              inset -2px -2px 0 rgba(0,0,0,.45);
  /* dithered top rule — same arcade-marquee motif as .sb-soon */
  background-image:
    repeating-linear-gradient(90deg, var(--sb-gold) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, rgba(16,32,70,.5), rgba(8,17,39,.74));
  background-size: 100% 2px, 100% 100%;
  background-repeat: no-repeat;
  background-position: top left, center;
}

/* ---- Search field ---- */
.sb-filter__search { position: relative; margin-bottom: .9rem; }
/* visually-hidden but accessible label */
.sb-filter__searchlabel {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sb-filter__searchicon {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; pointer-events: none; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M21%2021l-4.3-4.3%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.sb-filter__input {
  width: 100%;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: .98rem; color: var(--sb-ink);
  padding: .62rem .8rem .62rem 2.4rem;
  background: rgba(6,12,29,.6);
  border: 1px solid var(--sb-line-soft);
  border-radius: 4px;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.35);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sb-filter__input::placeholder { color: var(--sb-ink-dim); }
.sb-filter__input:focus {
  outline: none;
  border-color: var(--sb-gold);
  background: rgba(6,12,29,.78);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.35), 0 0 0 2px var(--sb-gold-soft);
}
/* hide the native clear "x" in WebKit; we keep our own reset affordance */
.sb-filter__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---- Chip rows ---- */
.sb-filter__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .55rem;
}
.sb-filter__legend {
  font-family: var(--sb-font-pixel);
  text-transform: uppercase; letter-spacing: .12em; font-size: .72rem;
  font-weight: 600; color: var(--sb-ink-dim);
  margin-right: .35rem; min-width: 4.6rem;
}

/* A single filter chip — pixel pill, navy default, gold when active. */
.sb-chip {
  appearance: none; cursor: pointer;
  font-family: var(--sb-font-pixel);
  font-size: .8rem; font-weight: 600; letter-spacing: .03em;
  line-height: 1.2; color: var(--sb-ink-body);
  background: rgba(8,17,39,.6);
  border: 1px solid var(--sb-line-soft);
  border-radius: 3px;
  padding: .26em .7em;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.05), inset -1px -1px 0 rgba(0,0,0,.4);
  transition: transform .12s steps(2), color .15s ease,
              background .15s ease, border-color .15s ease;
}
.sb-chip:hover {
  color: var(--sb-ink); border-color: var(--sb-line);
  transform: translateY(-1px);
}
.sb-chip:focus-visible {
  outline: none; border-color: var(--sb-gold);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.05),
              inset -1px -1px 0 rgba(0,0,0,.4),
              0 0 0 2px var(--sb-gold-soft);
}
.sb-chip:active { transform: translateY(1px); }
.sb-chip.is-active {
  color: var(--sb-navy-950);
  background: var(--sb-gold);
  border-color: var(--sb-gold);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.22);
}
/* "All dimensions" tag chip echoes its outline-gold badge when active */
.sb-chip--all.is-active {
  color: var(--sb-gold);
  background: rgba(8,17,39,.85);
  border-color: var(--sb-gold);
}
/* "Unassigned" tag chip stays neutral/dashed even when active */
.sb-chip--unassigned.is-active {
  color: var(--sb-ink);
  background: rgba(8,17,39,.85);
  border: 1px dashed rgba(232,236,245,.4);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.05);
}

/* ---- Live count line ---- */
.sb-filter__count {
  margin: .9rem 0 0; font-size: .82rem; color: var(--sb-ink-dim); line-height: 1.4;
}
.sb-filter__count strong {
  font-family: var(--sb-font-pixel);
  color: var(--sb-gold); font-weight: 600; font-size: .92rem;
}

/* ---- Empty state ---- */
.sb-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .55rem; margin: 1.4rem 0 2.4rem; padding: 2.6rem 1.4rem;
  border: 2px dashed var(--sb-line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(16,32,70,.4), rgba(8,17,39,.62));
}
.sb-empty[hidden] { display: none; }
.sb-empty__glyph {
  width: 52px; height: 52px; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e8c45a%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M21%2021l-4.3-4.3%27%2F%3E%3Cpath%20d%3D%27M8%2011h6%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.md-typeset .sb-empty__title {
  font-family: var(--sb-font-pixel);
  color: var(--sb-ink); font-weight: 600; font-size: 1.1rem; margin: 0;
}
.sb-empty__hint { margin: 0; color: var(--sb-ink-dim); font-size: .88rem; }
.sb-empty__reset { margin-top: .5rem; }

/* Cards hidden by the filter — belt & suspenders with the `hidden` attr. */
.mod-card[hidden] { display: none !important; }

@media (max-width: 540px) {
  .sb-filter__legend { min-width: 100%; margin-bottom: .1rem; }
}