:root {
  --mb-bg: #08040d;
  --mb-bg-2: #12071d;
  --mb-panel: rgba(21, 9, 34, .86);
  --mb-panel-2: rgba(37, 14, 54, .88);
  --mb-purple: #a83dff;
  --mb-purple-bright: #d671ff;
  --mb-blue: #36c7ff;
  --mb-red: #ff4e4e;
  --mb-gold: #e0ac52;
  --mb-gold-light: #ffd37d;
  --mb-text: #f7f0ff;
  --mb-muted: #c9b8d9;
  --mb-border: rgba(224, 172, 82, .36);
  --mb-shadow: 0 24px 70px rgba(0, 0, 0, .52);
  --mb-shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--mb-text);
  background:
    radial-gradient(circle at 50% -10%, rgba(159, 55, 255, .17), transparent 34rem),
    linear-gradient(180deg, #12071d 0%, #09040f 36%, #08040d 100%);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.6;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(circle at 20% 20%, rgba(200, 110, 255, .25) 0 1px, transparent 1.5px), radial-gradient(circle at 80% 35%, rgba(54, 199, 255, .16) 0 1px, transparent 1.5px);
  background-size: 70px 70px, 110px 110px;
  z-index: -1;
}
a { color: var(--mb-blue); text-decoration: none; }
a:hover { color: white; }
img { max-width: 100%; height: auto; }
iframe { border: 0; }
.mb-shell { width: min(var(--mb-shell), calc(100% - 2rem)); margin: 0 auto; }

.mb-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(224, 172, 82, .2);
  background: rgba(8, 4, 13, .75);
  backdrop-filter: blur(12px);
  transition: background .2s ease, box-shadow .2s ease;
}
.mb-site-header.mb-scrolled { background: rgba(8,4,13,.94); box-shadow: 0 12px 35px rgba(0,0,0,.35); }
.mb-header-inner { min-height: 82px; display: flex; align-items: center; gap: 1.25rem; justify-content: space-between; }
.mb-brand { display: inline-flex; align-items: center; gap: .85rem; color: white; min-width: 280px; }
.mb-brand-crest { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: var(--mb-crest-image) center / cover no-repeat; box-shadow: 0 0 24px rgba(168,61,255,.35); border: 1px solid rgba(255,211,125,.25); }
.mb-logo-wrap img { max-height: 58px; width: auto; }
.mb-brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.mb-brand-name { font-size: 1.08rem; color: var(--mb-gold-light); font-weight: 700; letter-spacing: .035em; }
.mb-brand-tagline { color: var(--mb-muted); font-size: .72rem; margin-top: .28rem; letter-spacing: .08em; }
.mb-nav-list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 1.2rem; }
.mb-nav-list a { color: var(--mb-muted); font-family: system-ui, sans-serif; font-size: .92rem; font-weight: 650; }
.mb-nav-list a:hover { color: var(--mb-gold-light); }

.mb-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .78rem 1.25rem; border-radius: 999px; font-family: system-ui, sans-serif; font-weight: 800; letter-spacing: .02em; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mb-button:hover { transform: translateY(-2px); }
.mb-button-small { min-height: 42px; padding: .62rem 1rem; font-size: .88rem; }
.mb-button-gold { color: #241100; background: linear-gradient(180deg, #ffd987, #d89b38); border: 1px solid #ffe1a3; box-shadow: 0 10px 26px rgba(224,172,82,.22); }
.mb-button-gold:hover { color: #180b00; box-shadow: 0 12px 34px rgba(224,172,82,.34); }
.mb-button-glass { color: white; border: 1px solid rgba(213,113,255,.45); background: rgba(80,27,112,.27); box-shadow: 0 10px 28px rgba(90,31,126,.22); }

.mb-hero { position: relative; min-height: 690px; display: flex; align-items: center; isolation: isolate; background-image: var(--mb-hero-image); background-position: center; background-size: cover; overflow: hidden; }
.mb-hero::before { content:''; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(6,3,10,.84) 0%, rgba(10,4,18,.63) 38%, rgba(12,4,21,.3) 62%, rgba(6,3,10,.55) 100%); }
.mb-hero::after { content:''; position:absolute; inset:auto 0 0; height:230px; z-index:-1; background:linear-gradient(transparent, var(--mb-bg)); }
.mb-hero-inner { padding: 7.5rem 0 8rem; }
.mb-hero-copy { max-width: 680px; padding: 2rem 2.1rem; border: 1px solid var(--mb-border); border-radius: 26px; background: linear-gradient(145deg, rgba(18,7,29,.78), rgba(11,5,18,.66)); box-shadow: var(--mb-shadow); backdrop-filter: blur(5px); }
.mb-eyebrow, .mb-kicker, .mb-panel-label { color: var(--mb-gold-light); text-transform: uppercase; letter-spacing: .2em; font-family: system-ui, sans-serif; font-size: .76rem; font-weight: 800; }
.mb-hero h1 { font-size: clamp(3.4rem, 7vw, 6.5rem); line-height: .92; margin: .45rem 0 1rem; color: #fff5df; text-shadow: 0 3px 0 #6a3d0b, 0 0 26px rgba(178,70,255,.42); }
.mb-hero p { font-size: 1.18rem; color: #e6d8ef; max-width: 610px; }
.mb-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem; }

.mb-section { padding: 5rem 0; }
.mb-section-dark { background: linear-gradient(180deg, rgba(24,10,38,.62), rgba(9,4,15,.9)); border-block: 1px solid rgba(168,61,255,.12); }
.mb-section-heading { margin-bottom: 2rem; max-width: 760px; }
.mb-section-heading h1, .mb-section-heading h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); margin: .3rem 0 .7rem; color: var(--mb-gold-light); }
.mb-section-heading p { color: var(--mb-muted); font-size: 1.06rem; margin:0; }
.mb-two-column { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1.4rem; }
.mb-panel { position:relative; overflow:hidden; padding:2rem; border-radius:22px; border:1px solid var(--mb-border); background:linear-gradient(145deg, var(--mb-panel-2), var(--mb-panel)); box-shadow:var(--mb-shadow); }
.mb-panel::before { content:''; position:absolute; inset:0 auto auto 0; width:160px; height:3px; background:linear-gradient(90deg,var(--mb-purple-bright),transparent); }
.mb-panel-esra::after, .mb-panel-willow::after { content:''; position:absolute; width:180px; height:180px; border-radius:50%; right:-70px; bottom:-90px; opacity:.18; filter:blur(5px); }
.mb-panel-esra::after { background:var(--mb-red); }
.mb-panel-willow::after { background:var(--mb-blue); }
.mb-panel h2 { margin:.4rem 0 .7rem; color:#fff5df; font-size:2rem; }
.mb-panel p { color:#d8c9e3; }

.mb-twitch-shell { display:grid; grid-template-columns:minmax(0, 3fr) minmax(320px, 1fr); overflow:hidden; border-radius:22px; border:1px solid var(--mb-border); background:#050208; box-shadow:var(--mb-shadow); }
.mb-twitch-player iframe { display:block; width:100%; aspect-ratio:16/9; height:auto; min-height:420px; }
.mb-twitch-chat iframe { display:block; width:100%; height:100%; min-height:420px; background:#18181b; }

.mb-game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.mb-game-card { min-height:230px; padding:1.5rem; border-radius:20px; border:1px solid rgba(224,172,82,.28); background:linear-gradient(180deg,rgba(35,13,51,.82),rgba(14,7,22,.92)); box-shadow:0 16px 36px rgba(0,0,0,.3); transition:transform .2s ease,border-color .2s ease; }
.mb-game-card:hover { transform:translateY(-4px); border-color:rgba(214,113,255,.55); }
.mb-game-card > span { font-size:2rem; }
.mb-game-card h3 { color:var(--mb-gold-light); font-size:1.35rem; margin:.75rem 0 .45rem; }
.mb-game-card p { color:var(--mb-muted); }
.mb-support-card { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2.2rem; border-radius:24px; border:1px solid var(--mb-border); background:radial-gradient(circle at 12% 30%,rgba(168,61,255,.18),transparent 30%),linear-gradient(135deg,rgba(31,12,44,.92),rgba(12,6,20,.95)); box-shadow:var(--mb-shadow); }
.mb-support-card h2 { color:var(--mb-gold-light); margin:.35rem 0 .5rem; font-size:clamp(1.7rem,3vw,2.7rem); }
.mb-support-card p { color:var(--mb-muted); max-width:760px; }

.mb-page-section { min-height:65vh; padding-top:7rem; }
.mb-content-wrap { max-width:900px; }
.mb-page-card, .mb-post-card { border:1px solid var(--mb-border); background:var(--mb-panel); border-radius:22px; box-shadow:var(--mb-shadow); }
.mb-page-card { padding:2rem; }
.mb-page-card h1 { color:var(--mb-gold-light); font-size:clamp(2.3rem,5vw,4rem); margin-top:0; }
.mb-entry-content { color:#e5d9ec; }
.mb-entry-content h2,.mb-entry-content h3 { color:var(--mb-gold-light); }
.mb-post-card { overflow:hidden; margin-bottom:1.5rem; }
.mb-post-thumb img { display:block; width:100%; max-height:420px; object-fit:cover; }
.mb-post-body { padding:1.6rem; }
.mb-post-body h2 { margin:.2rem 0 .65rem; }
.mb-post-body h2 a { color:var(--mb-gold-light); }
.mb-post-meta { color:#9c89ae; font-family:system-ui,sans-serif; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; }
.mb-featured { margin-bottom:1.5rem; border-radius:16px; overflow:hidden; }
.mb-text-link { color:var(--mb-gold-light); font-family:system-ui,sans-serif; font-weight:700; }
.mb-404 { text-align:center; padding:5rem 2rem; }

.mb-footer { border-top:1px solid rgba(224,172,82,.18); background:#060309; padding:2.3rem 0; }
.mb-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:1.5rem; align-items:center; }
.mb-footer-title { color:var(--mb-gold-light); font-size:1.25rem; font-weight:700; }
.mb-footer p,.mb-footer-copy { color:#9f8cae; margin:.3rem 0 0; }
.mb-footer-links { display:flex; justify-content:center; gap:1rem; font-family:system-ui,sans-serif; }
.mb-footer-copy { text-align:right; }

@media (max-width: 1050px) {
  .mb-nav { display:none; }
  .mb-twitch-shell { grid-template-columns:1fr; }
  .mb-twitch-chat iframe { height:460px; }
  .mb-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .mb-header-inner { min-height:70px; }
  .mb-brand { min-width:auto; }
  .mb-brand-copy { display:none; }
  .mb-button-small { font-size:.78rem; padding:.55rem .75rem; }
  .mb-hero { min-height:620px; background-position:center; }
  .mb-hero-inner { padding:5rem 0 6.5rem; }
  .mb-hero-copy { padding:1.45rem; }
  .mb-hero h1 { font-size:clamp(3rem,15vw,4.6rem); }
  .mb-two-column,.mb-game-grid,.mb-footer-grid { grid-template-columns:1fr; }
  .mb-support-card { align-items:flex-start; flex-direction:column; }
  .mb-footer-links { justify-content:flex-start; }
  .mb-footer-copy { text-align:left; }
  .mb-twitch-player iframe { min-height:250px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}

/* ========================================================================== 
   Mana Bond v1.2 — Living Arcane Interface
   ========================================================================== */

/* Keep the animated ambience behind all usable content. */
.mb-main,
.mb-footer { position: relative; z-index: 1; }
.mb-site-header { z-index: 1000; }

.mb-mana-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .9;
}
.mb-mana-orb {
  position: absolute;
  width: 22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(74px);
  opacity: .11;
  will-change: transform;
}
.mb-mana-orb-one {
  left: -8rem;
  top: 12%;
  background: var(--mb-red);
  animation: mbOrbDriftOne 19s ease-in-out infinite alternate;
}
.mb-mana-orb-two {
  right: -9rem;
  top: 38%;
  background: var(--mb-blue);
  animation: mbOrbDriftTwo 23s ease-in-out infinite alternate;
}
.mb-mana-orb-three {
  left: 38%;
  bottom: -12rem;
  background: var(--mb-purple);
  animation: mbOrbDriftThree 27s ease-in-out infinite alternate;
}
.mb-mana-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff5ff;
  box-shadow: 0 0 9px rgba(214,113,255,.9), 0 0 20px rgba(168,61,255,.55);
  opacity: 0;
  animation: mbSparkFloat 10s linear infinite;
}
.mb-spark-one { left: 11%; bottom: -3%; animation-delay: -1s; animation-duration: 11s; }
.mb-spark-two { left: 31%; bottom: -3%; animation-delay: -7s; animation-duration: 14s; }
.mb-spark-three { left: 56%; bottom: -3%; animation-delay: -4s; animation-duration: 12s; }
.mb-spark-four { left: 76%; bottom: -3%; animation-delay: -9s; animation-duration: 16s; }
.mb-spark-five { left: 91%; bottom: -3%; animation-delay: -2s; animation-duration: 13s; }

@keyframes mbOrbDriftOne {
  from { transform: translate3d(0,0,0) scale(.92); }
  to { transform: translate3d(9vw,8vh,0) scale(1.08); }
}
@keyframes mbOrbDriftTwo {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-10vw,-7vh,0) scale(.9); }
}
@keyframes mbOrbDriftThree {
  from { transform: translate3d(-4vw,0,0) scale(.95); }
  to { transform: translate3d(7vw,-9vh,0) scale(1.12); }
}
@keyframes mbSparkFloat {
  0% { transform: translate3d(0,0,0) scale(.6); opacity: 0; }
  10% { opacity: .65; }
  55% { opacity: .3; }
  100% { transform: translate3d(32px,-108vh,0) scale(1.4); opacity: 0; }
}

/* Crest idle animation — a quiet pulse rather than a spinning logo. */
.mb-brand-crest,
.mb-logo-wrap img {
  transform-origin: 50% 50%;
  animation: mbCrestBreathe 4.8s ease-in-out infinite;
}
.mb-brand-crest { position: relative; }
.mb-brand-crest::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(214,113,255,.23);
  opacity: .3;
  animation: mbCrestRing 4.8s ease-in-out infinite;
}
@keyframes mbCrestBreathe {
  0%,100% { filter: drop-shadow(0 0 0 rgba(168,61,255,0)); transform: translateZ(0) scale(1); }
  50% { filter: drop-shadow(0 0 9px rgba(214,113,255,.45)); transform: translateZ(0) scale(1.025); }
}
@keyframes mbCrestRing {
  0%,100% { transform: scale(.92); opacity: 0; }
  45% { opacity: .55; }
  70% { transform: scale(1.11); opacity: 0; }
}

/* Scroll reveal. Content is only hidden after JS marks motion as available. */
.mb-motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0,24px,0);
  transition: opacity .72s ease, transform .72s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--mb-reveal-delay, 0ms);
}
.mb-motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Make buttons and cards feel enchanted without becoming noisy. */
.mb-button { position: relative; overflow: hidden; isolation: isolate; }
.mb-button::after {
  content: '';
  position: absolute;
  top: -160%;
  left: -45%;
  width: 34%;
  height: 420%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transition: left .62s ease;
  z-index: -1;
}
.mb-button:hover::after { left: 118%; }
.mb-game-card:hover { box-shadow: 0 18px 44px rgba(77,26,111,.3), inset 0 0 0 1px rgba(214,113,255,.08); }

/* Twitch live state */
.mb-heading-status-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.mb-heading-status-row h2 { margin-right: auto; }
.mb-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .52rem;
  min-height: 34px;
  padding: .4rem .72rem;
  border-radius: 999px;
  border: 1px solid rgba(201,184,217,.2);
  background: rgba(255,255,255,.05);
  color: var(--mb-muted);
  font: 750 .75rem/1 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.mb-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .65;
}
.mb-live-badge.is-live {
  color: #fff;
  border-color: rgba(255,78,78,.62);
  background: rgba(178,26,44,.3);
  box-shadow: 0 0 0 1px rgba(255,78,78,.08), 0 0 28px rgba(255,78,78,.2);
}
.mb-live-badge.is-live .mb-live-dot {
  background: #ff3e52;
  opacity: 1;
  animation: mbLivePulse 1.35s ease-out infinite;
}
.mb-live-badge.is-offline {
  color: #d4c4df;
  border-color: rgba(168,61,255,.27);
  background: rgba(56,23,76,.24);
}
@keyframes mbLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(255,62,82,.7); }
  70% { box-shadow: 0 0 0 7px rgba(255,62,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,62,82,0); }
}
.mb-stream-live #watch .mb-twitch-shell {
  border-color: rgba(255,78,78,.38);
  box-shadow: 0 24px 70px rgba(0,0,0,.52), 0 0 42px rgba(255,78,78,.1);
}
.mb-stream-live .mb-site-header .mb-button-gold {
  box-shadow: 0 10px 28px rgba(224,172,82,.26), 0 0 22px rgba(255,78,78,.11);
}

.mb-twitch-player {
  position: relative;
  min-height: 420px;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(180deg, rgba(11,5,18,.28), rgba(5,2,8,.86)),
    var(--mb-offline-image) center / cover no-repeat;
}
.mb-twitch-player-target,
.mb-twitch-player-target iframe,
.mb-twitch-player noscript,
.mb-twitch-player noscript iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 420px;
}
.mb-twitch-fallback {
  display: flex;
  height: 100%;
  min-height: 420px;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: rgba(5,2,8,.72);
}
.mb-twitch-fallback a { color: var(--mb-gold-light); font-weight: 800; }

/* The actual “bond”: red + blue mana converging on the crest. */
.mb-bond-heading {
  margin-bottom: 1.35rem;
  text-align: center;
}
.mb-bond-thread {
  display: grid;
  grid-template-columns: minmax(50px,1fr) 58px minmax(50px,1fr);
  width: min(680px, 86%);
  align-items: center;
  gap: .55rem;
  margin: .9rem auto 0;
}
.mb-thread-red,
.mb-thread-blue {
  height: 2px;
  position: relative;
  overflow: visible;
}
.mb-thread-red {
  background: linear-gradient(90deg, transparent, rgba(255,78,78,.24), rgba(255,78,78,.92));
  box-shadow: 0 0 13px rgba(255,78,78,.42);
}
.mb-thread-blue {
  background: linear-gradient(90deg, rgba(54,199,255,.92), rgba(54,199,255,.24), transparent);
  box-shadow: 0 0 13px rgba(54,199,255,.42);
}
.mb-thread-red::after,
.mb-thread-blue::before {
  content:'';
  position:absolute;
  top:50%;
  width: 7px;
  height: 7px;
  border-radius:50%;
  transform: translateY(-50%);
  animation: mbManaTravel 2.8s ease-in-out infinite;
}
.mb-thread-red::after { right: 0; background: var(--mb-red); box-shadow:0 0 12px var(--mb-red); }
.mb-thread-blue::before { left: 0; background: var(--mb-blue); box-shadow:0 0 12px var(--mb-blue); animation-delay:-1.4s; }
.mb-bond-sigil {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--mb-crest-image) center / cover no-repeat;
  border: 1px solid rgba(255,211,125,.32);
  box-shadow: 0 0 22px rgba(168,61,255,.3);
  animation: mbBondPulse 4s ease-in-out infinite;
}
@keyframes mbManaTravel {
  0%,100% { transform: translateY(-50%) scale(.55); opacity:.25; }
  50% { transform: translateY(-50%) scale(1.35); opacity:1; }
}
@keyframes mbBondPulse {
  0%,100% { transform: scale(1); box-shadow:0 0 18px rgba(168,61,255,.24); }
  50% { transform: scale(1.045); box-shadow:0 0 30px rgba(214,113,255,.42),0 0 48px rgba(54,199,255,.1); }
}

/* Esra + Willow interactive cards */
.mb-persona-card {
  --mb-tilt-x: 0deg;
  --mb-tilt-y: 0deg;
  --mb-glow-x: 50%;
  --mb-glow-y: 50%;
  transform-style: preserve-3d;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.mb-persona-card.is-revealed:hover {
  transform: perspective(900px) rotateX(var(--mb-tilt-x)) rotateY(var(--mb-tilt-y)) translateY(-5px);
}
.mb-persona-card .mb-persona-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(circle at var(--mb-glow-x) var(--mb-glow-y), rgba(255,255,255,.14), transparent 34%);
}
.mb-persona-card:hover .mb-persona-aura { opacity: 1; }
.mb-panel-esra:hover {
  border-color: rgba(255,78,78,.46);
  box-shadow: var(--mb-shadow), 0 0 40px rgba(255,78,78,.11);
}
.mb-panel-willow:hover {
  border-color: rgba(54,199,255,.46);
  box-shadow: var(--mb-shadow), 0 0 40px rgba(54,199,255,.11);
}
.mb-persona-meta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .4rem;
  color: #bba8c9;
  font: 700 .74rem/1 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mb-persona-dot { width:7px; height:7px; border-radius:50%; }
.mb-panel-esra .mb-persona-dot { background:var(--mb-red); box-shadow:0 0 10px rgba(255,78,78,.72); }
.mb-panel-willow .mb-persona-dot { background:var(--mb-blue); box-shadow:0 0 10px rgba(54,199,255,.72); }

/* Next stream countdown */
.mb-countdown-card {
  position: relative;
  overflow: hidden;
  margin-top: 1.35rem;
  padding: 1rem 1rem .9rem;
  border-radius: 16px;
  border: 1px solid rgba(214,113,255,.28);
  background:
    linear-gradient(100deg, rgba(12,5,18,.9), rgba(35,12,49,.76)),
    var(--mb-offline-image) center / cover no-repeat;
}
.mb-countdown-card::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(105deg, transparent 20%, rgba(214,113,255,.08) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: mbCountdownSweep 7s ease-in-out infinite;
}
@keyframes mbCountdownSweep {
  0%,70%,100% { transform:translateX(-100%); }
  84% { transform:translateX(100%); }
}
.mb-countdown-label {
  display:block;
  color:var(--mb-gold-light);
  font:800 .76rem/1.2 system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:.8rem;
}
.mb-countdown-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.45rem;
  position:relative;
  z-index:1;
}
.mb-countdown-grid > span {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:.55rem .3rem;
  border-radius:10px;
  background:rgba(9,4,15,.7);
  border:1px solid rgba(255,255,255,.06);
}
.mb-countdown-grid strong {
  color:white;
  font:800 1.55rem/1 system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
}
.mb-countdown-grid small {
  margin-top:.35rem;
  color:#a894b7;
  font:700 .6rem/1 system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.mb-countdown-note {
  margin-top:.65rem;
  color:#bfaece;
  font:600 .78rem/1.3 system-ui,sans-serif;
  position:relative;
  z-index:1;
}
.mb-countdown-card.is-expired .mb-countdown-grid { opacity:.46; }
.mb-countdown-card.is-expired .mb-countdown-note { color:var(--mb-gold-light); }

@media (max-width: 760px) {
  .mb-heading-status-row { align-items:flex-start; }
  .mb-heading-status-row h2 { width:100%; }
  .mb-live-badge { margin-top:-.35rem; }
  .mb-bond-thread { width:96%; grid-template-columns:minmax(35px,1fr) 48px minmax(35px,1fr); }
  .mb-bond-sigil { width:48px; height:48px; }
  .mb-twitch-player,
  .mb-twitch-player-target,
  .mb-twitch-player-target iframe,
  .mb-twitch-player noscript,
  .mb-twitch-player noscript iframe,
  .mb-twitch-fallback { min-height:300px; }
  .mb-persona-card.is-revealed:hover { transform:translateY(-3px); }
  .mb-countdown-grid strong { font-size:1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-mana-orb,
  .mb-mana-spark,
  .mb-brand-crest,
  .mb-logo-wrap img,
  .mb-brand-crest::after,
  .mb-thread-red::after,
  .mb-thread-blue::before,
  .mb-bond-sigil,
  .mb-live-badge.is-live .mb-live-dot,
  .mb-countdown-card::after { animation:none!important; }
  .mb-motion-ready [data-reveal],
  .mb-motion-ready [data-reveal].is-revealed { opacity:1!important; transform:none!important; }
  .mb-persona-card.is-revealed:hover { transform:none!important; }
  .mb-button::after { display:none; }
}

/* ========================================================================== 
   Mana Bond v1.3 — Seasonal Skins + Twitch Portal
   ========================================================================== */

/* Bottom-of-page Twitch portal: red + blue mana meet at the crest. */
.mb-twitch-portal-section {
  padding-top: 4.2rem;
  padding-bottom: 5.5rem;
}
.mb-twitch-portal {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 1.8rem;
  min-height: 250px;
  padding: 2.25rem 2.5rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  border: 1px solid rgba(224,172,82,.38);
  color: var(--mb-text);
  background:
    radial-gradient(circle at 17% 50%, rgba(255,78,78,.16), transparent 28%),
    radial-gradient(circle at 83% 50%, rgba(54,199,255,.15), transparent 28%),
    linear-gradient(112deg, rgba(22,7,31,.97), rgba(9,4,15,.96) 49%, rgba(17,8,30,.97));
  box-shadow: var(--mb-shadow), inset 0 0 0 1px rgba(214,113,255,.05);
  transition: transform .25s ease, border-color .3s ease, box-shadow .3s ease;
}
.mb-twitch-portal:hover {
  color: var(--mb-text);
  transform: translateY(-4px);
  border-color: rgba(255,211,125,.65);
  box-shadow: 0 30px 85px rgba(0,0,0,.58), 0 0 38px rgba(168,61,255,.12);
}
.mb-twitch-portal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .22;
  background: var(--mb-offline-image) center 42% / cover no-repeat;
  mix-blend-mode: screen;
  filter: saturate(.8) contrast(1.08);
}
.mb-twitch-portal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(4,2,7,.68), rgba(10,4,17,.9) 25%, rgba(10,4,17,.94) 75%, rgba(4,2,7,.68));
}
.mb-portal-crest {
  position: relative;
  z-index: 2;
  width: 126px;
  height: 126px;
  justify-self: center;
  border-radius: 50%;
  background: var(--mb-crest-image) center / cover no-repeat;
  border: 1px solid rgba(255,211,125,.5);
  box-shadow: 0 0 30px rgba(168,61,255,.35), 0 0 75px rgba(214,113,255,.12);
  animation: mbPortalCrest 4.5s ease-in-out infinite;
}
.mb-portal-crest::after {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(214,113,255,.22);
  border-radius: 50%;
  box-shadow: inset 0 0 16px rgba(214,113,255,.08);
  animation: mbPortalRing 4.5s ease-in-out infinite;
}
.mb-portal-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  max-width: 760px;
}
.mb-portal-title {
  margin: .25rem 0 .55rem;
  color: #fff5df;
  font-size: clamp(2.15rem, 4.5vw, 4.25rem);
  line-height: .98;
  text-shadow: 0 0 26px rgba(168,61,255,.22);
}
.mb-portal-text {
  color: #d9cae3;
  font-size: 1rem;
  max-width: 680px;
}
.mb-portal-action {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  width: max-content;
  margin-top: 1rem;
  padding-bottom: .2rem;
  color: var(--mb-gold-light);
  border-bottom: 1px solid rgba(255,211,125,.32);
  font: 800 .84rem/1.2 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.mb-portal-action span { transition: transform .2s ease; }
.mb-twitch-portal:hover .mb-portal-action span { transform: translateX(5px); }
.mb-portal-energy {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 44%;
  height: 2px;
  transform: translateY(-50%);
  opacity: .7;
}
.mb-portal-energy::before,
.mb-portal-energy::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.mb-portal-energy-red {
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(255,78,78,.2), rgba(255,78,78,.84));
  box-shadow: 0 0 18px rgba(255,78,78,.35);
}
.mb-portal-energy-red::after {
  right: 5%;
  background: var(--mb-red);
  box-shadow: 0 0 18px var(--mb-red);
  animation: mbPortalParticleLeft 3.4s ease-in-out infinite;
}
.mb-portal-energy-blue {
  right: 0;
  background: linear-gradient(90deg, rgba(54,199,255,.84), rgba(54,199,255,.2), transparent);
  box-shadow: 0 0 18px rgba(54,199,255,.35);
}
.mb-portal-energy-blue::before {
  left: 5%;
  background: var(--mb-blue);
  box-shadow: 0 0 18px var(--mb-blue);
  animation: mbPortalParticleRight 3.4s ease-in-out infinite -1.7s;
}
.mb-twitch-portal.is-live {
  border-color: rgba(255,78,78,.58);
  box-shadow: 0 30px 85px rgba(0,0,0,.58), 0 0 48px rgba(255,78,78,.12);
}
.mb-twitch-portal.is-live .mb-portal-title { color: #fff; text-shadow: 0 0 32px rgba(255,78,78,.24); }
.mb-twitch-portal.is-live .mb-portal-crest { box-shadow: 0 0 35px rgba(255,78,78,.34), 0 0 70px rgba(168,61,255,.16); }
.mb-twitch-portal.is-live .mb-portal-energy { opacity: 1; }

@keyframes mbPortalCrest {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes mbPortalRing {
  0%,100% { transform: scale(.96); opacity: .2; }
  50% { transform: scale(1.07); opacity: .62; }
}
@keyframes mbPortalParticleLeft {
  0%,100% { transform: translateY(-50%) translateX(-45px) scale(.6); opacity: .1; }
  50% { transform: translateY(-50%) translateX(0) scale(1.15); opacity: 1; }
}
@keyframes mbPortalParticleRight {
  0%,100% { transform: translateY(-50%) translateX(45px) scale(.6); opacity: .1; }
  50% { transform: translateY(-50%) translateX(0) scale(1.15); opacity: 1; }
}

/* Seasonal layer created by JS. */
.mb-season-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.mb-season-particle {
  position: absolute;
  left: var(--mb-particle-left);
  top: -8vh;
  opacity: 0;
  transform: scale(var(--mb-particle-size));
  will-change: transform, opacity;
  animation-duration: var(--mb-particle-speed);
  animation-delay: var(--mb-particle-delay);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.mb-season-intensity-subtle .mb-season-layer { opacity: .62; }
.mb-season-intensity-full .mb-season-layer { opacity: .95; }

/* FALL — amber arcane glow, burgundy shadows, drifting leaves. */
body.mb-season-fall {
  --mb-gold: #d9983c;
  --mb-gold-light: #ffd18a;
  --mb-purple: #9b4a6c;
  --mb-purple-bright: #d77777;
  background:
    radial-gradient(circle at 15% 8%, rgba(198,91,38,.14), transparent 26rem),
    radial-gradient(circle at 84% 20%, rgba(143,63,47,.12), transparent 28rem),
    linear-gradient(180deg,#160b11 0%,#0d070a 42%,#080405 100%);
}
body.mb-season-fall.mb-season-decor-on .mb-hero::before {
  background: linear-gradient(90deg, rgba(12,5,7,.88), rgba(45,18,18,.55) 45%, rgba(25,8,9,.38) 70%, rgba(7,3,5,.62));
}
body.mb-season-fall.mb-season-decor-on .mb-site-header {
  border-bottom-color: rgba(217,152,60,.28);
  background: rgba(15,7,10,.82);
}
body.mb-season-fall.mb-season-decor-on .mb-site-header::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px; height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(211,105,44,.32),rgba(255,193,94,.38),transparent);
}
.mb-season-particle-fall,
.mb-season-particle-thanksgiving {
  width: 13px;
  height: 9px;
  border-radius: 75% 15% 75% 20%;
  transform-origin: center;
  animation-name: mbLeafFall;
}
.mb-season-particle-fall {
  background: linear-gradient(145deg,#f3a84d,#9c3e2b 72%);
  box-shadow: 0 0 6px rgba(233,123,53,.18);
}
@keyframes mbLeafFall {
  0% { transform: translate3d(0,-10vh,0) rotate(0deg) scale(var(--mb-particle-size)); opacity:0; }
  10% { opacity:.88; }
  100% { transform: translate3d(var(--mb-particle-drift),115vh,0) rotate(var(--mb-particle-spin)) scale(var(--mb-particle-size)); opacity:.05; }
}

/* SPOOKY — haunted violet, ember orange, low fog, abstract bat silhouettes. */
body.mb-season-spooky {
  --mb-gold: #e3772f;
  --mb-gold-light: #ffb45f;
  --mb-purple: #8a2be2;
  --mb-purple-bright: #c75cff;
  background:
    radial-gradient(circle at 18% 12%,rgba(116,26,155,.2),transparent 29rem),
    radial-gradient(circle at 80% 18%,rgba(227,91,35,.11),transparent 25rem),
    linear-gradient(180deg,#100616 0%,#09040e 46%,#050207 100%);
}
body.mb-season-spooky.mb-season-decor-on .mb-hero::before {
  background: linear-gradient(90deg,rgba(5,2,8,.9),rgba(26,7,35,.66) 43%,rgba(44,13,18,.34) 70%,rgba(4,2,7,.7));
}
body.mb-season-spooky.mb-season-decor-on .mb-site-header {
  background: rgba(8,3,12,.9);
  border-bottom-color: rgba(227,119,47,.28);
}
body.mb-season-spooky.mb-season-decor-on .mb-season-layer::before,
body.mb-season-spooky.mb-season-decor-on .mb-season-layer::after {
  content:'';
  position:absolute;
  left:-10%;
  width:120%;
  height:28vh;
  bottom:-8vh;
  background: radial-gradient(ellipse at center,rgba(160,116,179,.12),transparent 66%);
  filter: blur(22px);
  animation: mbFogDrift 18s ease-in-out infinite alternate;
}
body.mb-season-spooky.mb-season-decor-on .mb-season-layer::after { bottom:5vh; opacity:.55; animation-delay:-8s; }
.mb-season-particle-spooky {
  width: 15px;
  height: 7px;
  background: #16071e;
  clip-path: polygon(0 45%,20% 10%,42% 38%,50% 16%,58% 38%,80% 10%,100% 45%,72% 38%,50% 100%,28% 38%);
  filter: drop-shadow(0 0 5px rgba(227,119,47,.2));
  animation-name: mbBatDrift;
}
@keyframes mbBatDrift {
  0% { transform: translate3d(0,-8vh,0) rotate(-7deg) scale(var(--mb-particle-size)); opacity:0; }
  12% { opacity:.6; }
  50% { transform: translate3d(var(--mb-particle-drift),52vh,0) rotate(8deg) scale(var(--mb-particle-size)); }
  100% { transform: translate3d(var(--mb-particle-drift),112vh,0) rotate(-9deg) scale(var(--mb-particle-size)); opacity:0; }
}
@keyframes mbFogDrift { from { transform:translateX(-3%); } to { transform:translateX(3%); } }

/* THANKSGIVING — cozy fantasy tavern / harvest, never cartoon turkey. */
body.mb-season-thanksgiving {
  --mb-gold: #c8893e;
  --mb-gold-light: #ffd89a;
  --mb-purple: #7a3f4e;
  --mb-purple-bright: #c07569;
  background:
    radial-gradient(circle at 50% -10%,rgba(205,132,58,.19),transparent 34rem),
    radial-gradient(circle at 10% 40%,rgba(113,49,28,.11),transparent 26rem),
    linear-gradient(180deg,#180e0a 0%,#0d0807 44%,#080504 100%);
}
body.mb-season-thanksgiving.mb-season-decor-on .mb-section-dark {
  background: linear-gradient(180deg,rgba(52,28,18,.64),rgba(15,8,7,.92));
}
body.mb-season-thanksgiving.mb-season-decor-on .mb-site-header {
  background: rgba(17,10,8,.87);
  border-bottom-color: rgba(214,154,69,.32);
}
body.mb-season-thanksgiving.mb-season-decor-on .mb-site-header::after {
  content:'';
  position:absolute;
  left:8%; right:8%; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,#c68a45,transparent);
  opacity:.7;
}
.mb-season-particle-thanksgiving {
  background: linear-gradient(145deg,#e2a252,#8b4b2f 72%);
  box-shadow: 0 0 8px rgba(255,188,91,.16);
}

/* CHRISTMAS — evergreen + icy mana + warm magical lights + snow. */
body.mb-season-xmas {
  --mb-gold: #d9b85c;
  --mb-gold-light: #ffe9a6;
  --mb-purple: #6b62b8;
  --mb-purple-bright: #9b9df2;
  --mb-blue: #75d7ff;
  background:
    radial-gradient(circle at 50% -12%,rgba(76,163,202,.16),transparent 35rem),
    radial-gradient(circle at 12% 22%,rgba(30,105,82,.12),transparent 29rem),
    linear-gradient(180deg,#081314 0%,#071011 42%,#05090b 100%);
}
body.mb-season-xmas.mb-season-decor-on .mb-site-header {
  background: rgba(5,14,14,.89);
  border-bottom-color: rgba(221,190,91,.28);
}
body.mb-season-xmas.mb-season-decor-on .mb-site-header::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:-4px; height:8px;
  pointer-events:none;
  background:
    radial-gradient(circle at 10px 3px,#ffd96d 0 2px,transparent 3px) 0 0/34px 8px repeat-x,
    linear-gradient(90deg,transparent,rgba(42,116,78,.7),transparent);
  filter: drop-shadow(0 0 5px rgba(255,217,109,.35));
}
body.mb-season-xmas.mb-season-decor-on .mb-hero::before {
  background: linear-gradient(90deg,rgba(4,10,11,.9),rgba(5,25,22,.6) 44%,rgba(14,27,38,.32) 72%,rgba(3,9,10,.64));
}
.mb-season-particle-xmas {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(240,251,255,.92);
  box-shadow: 0 0 7px rgba(181,226,255,.45);
  animation-name: mbSnowFall;
}
@keyframes mbSnowFall {
  0% { transform: translate3d(0,-8vh,0) scale(var(--mb-particle-size)); opacity:0; }
  10% { opacity:.9; }
  100% { transform: translate3d(var(--mb-particle-drift),112vh,0) scale(var(--mb-particle-size)); opacity:.15; }
}

/* Optional seasonal crest accents. */
body.mb-season-crest-on.mb-season-fall .mb-brand-crest,
body.mb-season-crest-on.mb-season-fall .mb-logo-wrap img,
body.mb-season-crest-on.mb-season-fall .mb-bond-sigil,
body.mb-season-crest-on.mb-season-fall .mb-portal-crest { box-shadow:0 0 28px rgba(226,139,58,.36),0 0 54px rgba(146,59,48,.12); }
body.mb-season-crest-on.mb-season-spooky .mb-brand-crest,
body.mb-season-crest-on.mb-season-spooky .mb-logo-wrap img,
body.mb-season-crest-on.mb-season-spooky .mb-bond-sigil,
body.mb-season-crest-on.mb-season-spooky .mb-portal-crest { box-shadow:0 0 30px rgba(199,92,255,.4),0 0 58px rgba(227,119,47,.15); }
body.mb-season-crest-on.mb-season-thanksgiving .mb-brand-crest,
body.mb-season-crest-on.mb-season-thanksgiving .mb-logo-wrap img,
body.mb-season-crest-on.mb-season-thanksgiving .mb-bond-sigil,
body.mb-season-crest-on.mb-season-thanksgiving .mb-portal-crest { box-shadow:0 0 28px rgba(211,151,70,.38),0 0 58px rgba(100,53,28,.14); }
body.mb-season-crest-on.mb-season-xmas .mb-brand-crest,
body.mb-season-crest-on.mb-season-xmas .mb-logo-wrap img,
body.mb-season-crest-on.mb-season-xmas .mb-bond-sigil,
body.mb-season-crest-on.mb-season-xmas .mb-portal-crest { box-shadow:0 0 30px rgba(112,208,255,.38),0 0 58px rgba(255,229,142,.12); }

/* Button accents can be toggled independently. */
body.mb-season-buttons-on.mb-season-fall .mb-button-gold,
body.mb-season-buttons-on.mb-season-thanksgiving .mb-button-gold { background:linear-gradient(180deg,#ffd695,#c98234);border-color:#ffe2af; }
body.mb-season-buttons-on.mb-season-spooky .mb-button-gold { background:linear-gradient(180deg,#ffb45f,#cf5e23);border-color:#ffc27c; }
body.mb-season-buttons-on.mb-season-xmas .mb-button-gold { background:linear-gradient(180deg,#fff0ae,#c9a33e);border-color:#fff2bd; }
body.mb-season-buttons-on.mb-season-xmas .mb-button-glass { border-color:rgba(112,208,255,.42);background:rgba(21,73,76,.3); }

/* Footer treatment can be disabled independently. */
body.mb-season-footer-on.mb-season-fall .mb-footer { background:linear-gradient(180deg,#0b0507,#130807);border-top-color:rgba(216,138,58,.24); }
body.mb-season-footer-on.mb-season-spooky .mb-footer { background:linear-gradient(180deg,#07020a,#100515);border-top-color:rgba(222,104,48,.24); }
body.mb-season-footer-on.mb-season-thanksgiving .mb-footer { background:linear-gradient(180deg,#0d0705,#17100b);border-top-color:rgba(214,154,69,.26); }
body.mb-season-footer-on.mb-season-xmas .mb-footer { background:linear-gradient(180deg,#04100f,#071817);border-top-color:rgba(113,205,234,.22); }

/* Season-specific portal polish so the CTA always belongs to the page. */
body.mb-season-fall .mb-twitch-portal,
body.mb-season-thanksgiving .mb-twitch-portal { border-color:rgba(220,151,72,.42); }
body.mb-season-spooky .mb-twitch-portal { border-color:rgba(228,111,46,.4); }
body.mb-season-xmas .mb-twitch-portal { border-color:rgba(122,207,238,.36); }

@media (max-width: 760px) {
  .mb-twitch-portal {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem 1.35rem;
  }
  .mb-portal-crest { width: 104px; height: 104px; }
  .mb-portal-copy { align-items: center; }
  .mb-portal-title { font-size: clamp(2rem,11vw,3.25rem); }
  .mb-portal-text { max-width: 34rem; }
  .mb-portal-energy { width: 50%; top: 83px; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-portal-crest,
  .mb-portal-crest::after,
  .mb-portal-energy-red::after,
  .mb-portal-energy-blue::before,
  .mb-season-particle,
  .mb-season-layer::before,
  .mb-season-layer::after { animation:none!important; }
  .mb-season-layer { display:none; }
}

/* ========================================================================== 
   Mana Bond v1.4 — Seasonal Worlds
   The core Mana Bond layout stays recognizable while the environment changes.
   ========================================================================== */

.mb-hero-season-scene,
.mb-hero-season-foreground,
.mb-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mb-hero-season-scene {
  z-index: 0;
  opacity: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.015);
  transition: opacity .35s ease;
}
.mb-hero-overlay {
  z-index: 1;
  background: linear-gradient(90deg, rgba(6,3,10,.86) 0%, rgba(10,4,18,.64) 39%, rgba(12,4,21,.22) 68%, rgba(6,3,10,.48) 100%);
}
.mb-hero-season-foreground {
  z-index: 2;
  overflow: hidden;
}
.mb-hero-inner {
  position: relative;
  z-index: 3;
}

body.mb-season-intensity-subtle .mb-hero-season-scene { opacity: .58; }
body.mb-season-intensity-full .mb-hero-season-scene { opacity: .94; }
body.mb-season-hero-off .mb-hero-season-scene { display: none; }
body.mb-season-foreground-off .mb-hero-season-foreground { display: none; }

body.mb-season-fall.mb-season-hero-on .mb-hero-season-scene { background-image: var(--mb-fall-scene); }
body.mb-season-spooky.mb-season-hero-on .mb-hero-season-scene { background-image: var(--mb-spooky-scene); }
body.mb-season-thanksgiving.mb-season-hero-on .mb-hero-season-scene { background-image: var(--mb-thanksgiving-scene); }
body.mb-season-xmas.mb-season-hero-on .mb-hero-season-scene { background-image: var(--mb-xmas-scene); }

/* FALL: more visible amber forest framing and a leaf-covered lower edge. */
body.mb-season-fall .mb-hero-overlay {
  background:
    radial-gradient(circle at 76% 30%, rgba(244,145,54,.11), transparent 27rem),
    linear-gradient(90deg, rgba(16,6,7,.91) 0%, rgba(45,18,18,.66) 41%, rgba(55,21,15,.25) 70%, rgba(13,5,6,.53) 100%);
}
body.mb-season-fall.mb-season-foreground-on .mb-hero-season-foreground::before {
  content:'';
  position:absolute;
  left:-4%; right:-4%; bottom:-62px;
  height:170px;
  background:
    radial-gradient(ellipse at 8% 55%, #9b3b29 0 16px, transparent 17px),
    radial-gradient(ellipse at 15% 36%, #e48336 0 12px, transparent 13px),
    radial-gradient(ellipse at 24% 62%, #c2542e 0 17px, transparent 18px),
    radial-gradient(ellipse at 72% 45%, #ef9c42 0 15px, transparent 16px),
    radial-gradient(ellipse at 83% 58%, #8d3130 0 18px, transparent 19px),
    radial-gradient(ellipse at 92% 31%, #d76630 0 13px, transparent 14px),
    linear-gradient(180deg, transparent 0 35%, rgba(93,35,24,.78) 100%);
  filter: drop-shadow(0 -10px 22px rgba(221,111,47,.12));
  opacity:.86;
}
body.mb-season-fall.mb-season-foreground-on .mb-hero-season-foreground::after {
  content:'';
  position:absolute;
  right:5%; top:8%;
  width:260px; height:180px;
  background: radial-gradient(ellipse at center, rgba(255,178,75,.18), transparent 67%);
  filter: blur(8px);
}

/* SPOOKY: moonlit twisted forest, heavier fog, and sinister lower framing. */
body.mb-season-spooky .mb-hero-overlay {
  background:
    radial-gradient(circle at 80% 20%, rgba(233,124,77,.09), transparent 23rem),
    linear-gradient(90deg, rgba(4,1,7,.93) 0%, rgba(25,5,34,.71) 40%, rgba(38,8,35,.25) 69%, rgba(4,1,7,.55) 100%);
}
body.mb-season-spooky.mb-season-foreground-on .mb-hero-season-foreground::before {
  content:'';
  position:absolute;
  left:-12%; right:-12%; bottom:-75px;
  height:260px;
  background:
    radial-gradient(ellipse at 20% 55%, rgba(152,116,172,.25), transparent 31%),
    radial-gradient(ellipse at 58% 42%, rgba(123,87,146,.25), transparent 35%),
    radial-gradient(ellipse at 88% 62%, rgba(96,68,119,.22), transparent 30%);
  filter: blur(20px);
  animation: mbV14Fog 14s ease-in-out infinite alternate;
}
body.mb-season-spooky.mb-season-foreground-on .mb-hero-season-foreground::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:115px;
  background: linear-gradient(180deg, transparent, rgba(5,1,8,.72));
  clip-path: polygon(0 48%,4% 30%,8% 54%,12% 24%,17% 56%,21% 38%,25% 62%,30% 31%,34% 56%,39% 35%,44% 65%,48% 41%,54% 63%,59% 32%,64% 58%,69% 29%,74% 57%,80% 35%,85% 61%,91% 27%,95% 49%,100% 30%,100% 100%,0 100%);
  opacity:.66;
}
@keyframes mbV14Fog { from { transform:translate3d(-2.5%,0,0); } to { transform:translate3d(2.5%,-8px,0); } }

/* THANKSGIVING: warm fantasy-harvest woodland with candle-gold depth. */
body.mb-season-thanksgiving .mb-hero-overlay {
  background:
    radial-gradient(circle at 78% 30%, rgba(255,186,92,.15), transparent 28rem),
    linear-gradient(90deg, rgba(19,9,5,.92) 0%, rgba(57,30,18,.68) 42%, rgba(61,33,18,.27) 70%, rgba(13,7,4,.55) 100%);
}
body.mb-season-thanksgiving.mb-season-foreground-on .mb-hero-season-foreground::before {
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:170px;
  background:
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(194,143,62,.32) 39px 42px, transparent 43px 68px),
    linear-gradient(180deg, transparent, rgba(50,24,13,.74));
  clip-path: polygon(0 30%,3% 58%,6% 37%,9% 69%,12% 33%,15% 64%,18% 41%,21% 71%,25% 34%,29% 68%,34% 40%,39% 72%,44% 37%,49% 66%,54% 42%,59% 70%,64% 36%,69% 67%,74% 39%,79% 72%,84% 35%,89% 64%,94% 38%,100% 68%,100% 100%,0 100%);
  opacity:.66;
}
body.mb-season-thanksgiving.mb-season-foreground-on .mb-hero-season-foreground::after {
  content:'';
  position:absolute;
  right:7%; top:14%;
  width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,205,126,.18),rgba(204,117,46,.07) 35%,transparent 68%);
}

/* CHRISTMAS: snowy world, decorated tree, deeper snowbanks and warm magical lights. */
body.mb-season-xmas .mb-hero-overlay {
  background:
    radial-gradient(circle at 78% 22%, rgba(105,207,255,.12), transparent 26rem),
    linear-gradient(90deg, rgba(3,10,11,.92) 0%, rgba(5,29,25,.68) 40%, rgba(9,32,38,.22) 69%, rgba(3,10,11,.52) 100%);
}
body.mb-season-xmas.mb-season-foreground-on .mb-hero-season-foreground::before {
  content:'';
  position:absolute;
  left:-5%; right:-5%; bottom:-68px;
  height:185px;
  border-radius:50% 50% 0 0 / 40% 40% 0 0;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255,255,255,.95) 0 17%, transparent 18%),
    radial-gradient(ellipse at 53% 22%, rgba(245,253,255,.94) 0 22%, transparent 23%),
    radial-gradient(ellipse at 83% 18%, rgba(238,250,255,.93) 0 19%, transparent 20%),
    linear-gradient(180deg,#eefaff 18%,#c9e5ee 72%,#9cc8d5 100%);
  box-shadow:0 -12px 40px rgba(164,221,242,.16);
  opacity:.88;
}
body.mb-season-xmas.mb-season-foreground-on .mb-hero-season-foreground::after {
  content:'';
  position:absolute;
  left:4%; right:4%; top:0;
  height:32px;
  background:
    radial-gradient(circle at 10px 11px,#ffd86a 0 3px,transparent 4px) 0 0/46px 30px repeat-x,
    linear-gradient(180deg,rgba(15,63,45,.62),rgba(10,40,32,.12) 55%,transparent 56%);
  filter:drop-shadow(0 0 8px rgba(255,216,106,.34));
  opacity:.8;
}

/* Seasonal message sits inside the hero card and can be edited/disabled in admin. */
.mb-season-hero-message {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-top:.75rem;
  padding:.5rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  font-family:system-ui,sans-serif;
  font-size:.82rem;
  font-weight:760;
  letter-spacing:.03em;
  color:#fff4d9;
  background:rgba(7,3,11,.48);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.mb-season-hero-message-fall { border-color:rgba(231,145,59,.34); }
.mb-season-hero-message-spooky { border-color:rgba(224,103,47,.38); color:#ffd0a7; }
.mb-season-hero-message-thanksgiving { border-color:rgba(222,169,87,.35); }
.mb-season-hero-message-xmas { border-color:rgba(149,220,245,.34); color:#e8faff; }

/* Header framing is independently switchable. */
body.mb-season-header-on .mb-site-header { overflow:visible; }
body.mb-season-fall.mb-season-header-on .mb-site-header {
  background:rgba(15,7,9,.9);
  border-bottom-color:rgba(225,145,62,.34);
}
body.mb-season-fall.mb-season-header-on .mb-site-header::after {
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:7px;pointer-events:none;
  background:linear-gradient(90deg,transparent 2%,#8b3428 15%,#e5893c 34%,#a3442d 50%,#efad50 69%,#87302d 86%,transparent 98%);
  opacity:.72;filter:blur(.2px) drop-shadow(0 3px 5px rgba(202,92,39,.2));
}
body.mb-season-spooky.mb-season-header-on .mb-site-header {
  background:rgba(7,2,11,.94);border-bottom-color:rgba(227,111,47,.36);
}
body.mb-season-spooky.mb-season-header-on .mb-site-header::after {
  content:'';position:absolute;left:0;right:0;bottom:-7px;height:12px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(127,35,154,.4),rgba(235,103,43,.48),rgba(127,35,154,.4),transparent);
  clip-path:polygon(0 0,100% 0,96% 35%,92% 8%,88% 55%,83% 15%,78% 65%,73% 12%,68% 58%,63% 18%,58% 70%,53% 17%,48% 62%,43% 10%,38% 65%,33% 15%,28% 55%,23% 9%,18% 62%,13% 12%,8% 45%,4% 13%,0 40%);
}
body.mb-season-thanksgiving.mb-season-header-on .mb-site-header {
  background:rgba(18,10,7,.92);border-bottom-color:rgba(218,158,75,.37);
}
body.mb-season-thanksgiving.mb-season-header-on .mb-site-header::after {
  content:'';position:absolute;left:7%;right:7%;bottom:-3px;height:5px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#8f4d2f,#dfa24c,#8f4d2f,transparent);opacity:.84;
}
body.mb-season-xmas.mb-season-header-on .mb-site-header {
  background:rgba(4,14,13,.94);border-bottom-color:rgba(144,218,241,.31);
}
body.mb-season-xmas.mb-season-header-on .mb-site-header::after {
  content:'';position:absolute;left:0;right:0;bottom:-10px;height:15px;pointer-events:none;
  background:
    radial-gradient(circle at 9px 5px,#ffd85f 0 3px,transparent 4px) 0 0/38px 13px repeat-x,
    linear-gradient(90deg,transparent,rgba(24,95,65,.88),rgba(25,121,80,.88),rgba(24,95,65,.88),transparent) 0 0/100% 5px no-repeat;
  filter:drop-shadow(0 0 7px rgba(255,216,95,.35));
}

/* Crest surroundings get a little more than a box-shadow in v1.4. */
.mb-brand-crest,
.mb-logo-wrap img { position:relative; }
body.mb-season-crest-on.mb-season-spooky .mb-brand-crest,
body.mb-season-crest-on.mb-season-spooky .mb-logo-wrap img { filter:drop-shadow(0 0 12px rgba(195,73,255,.42)) drop-shadow(0 0 8px rgba(232,110,47,.2)); }
body.mb-season-crest-on.mb-season-xmas .mb-brand-crest,
body.mb-season-crest-on.mb-season-xmas .mb-logo-wrap img { filter:drop-shadow(0 0 12px rgba(116,214,255,.42)) drop-shadow(0 0 8px rgba(255,221,112,.18)); }
body.mb-season-crest-on.mb-season-fall .mb-brand-crest,
body.mb-season-crest-on.mb-season-thanksgiving .mb-brand-crest { outline:1px solid rgba(236,169,80,.26); outline-offset:3px; }

/* Stronger footer bookends. */
body.mb-season-footer-on .mb-footer { overflow:hidden; min-height:118px; }
body.mb-season-footer-on .mb-footer::before {
  content:'';position:absolute;left:0;right:0;top:0;height:12px;pointer-events:none;opacity:.88;
}
body.mb-season-footer-on .mb-footer::after {
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.2;z-index:-1;
}
body.mb-season-footer-on.mb-season-fall .mb-footer::before {
  background:linear-gradient(90deg,transparent,#9a3d2c 14%,#e68b3e 32%,#7d2d30 50%,#e1a04c 70%,#96362d 86%,transparent);
}
body.mb-season-footer-on.mb-season-fall .mb-footer::after { background:radial-gradient(circle at 20% 100%,rgba(218,105,42,.4),transparent 27rem); }
body.mb-season-footer-on.mb-season-spooky .mb-footer::before {
  background:linear-gradient(90deg,transparent,#76288d,#e5682b,#76288d,transparent);
  clip-path:polygon(0 0,100% 0,100% 35%,94% 70%,88% 32%,82% 76%,76% 38%,70% 82%,64% 32%,58% 74%,52% 36%,46% 80%,40% 30%,34% 74%,28% 36%,22% 80%,16% 31%,10% 70%,4% 36%,0 75%);
}
body.mb-season-footer-on.mb-season-spooky .mb-footer::after { background:radial-gradient(circle at 80% 110%,rgba(128,39,165,.48),transparent 27rem); }
body.mb-season-footer-on.mb-season-thanksgiving .mb-footer::before { background:linear-gradient(90deg,transparent,#805033,#dca24d,#805033,transparent); }
body.mb-season-footer-on.mb-season-thanksgiving .mb-footer::after { background:radial-gradient(circle at 50% 100%,rgba(208,137,61,.35),transparent 25rem); }
body.mb-season-footer-on.mb-season-xmas .mb-footer::before {
  height:15px;
  background:
    radial-gradient(circle at 9px 6px,#ffe06d 0 3px,transparent 4px) 0 0/42px 13px repeat-x,
    linear-gradient(90deg,transparent,#176044,#1d7d56,#176044,transparent) 0 0/100% 5px no-repeat;
  filter:drop-shadow(0 0 6px rgba(255,224,109,.3));
}
body.mb-season-footer-on.mb-season-xmas .mb-footer::after { background:radial-gradient(circle at 50% 120%,rgba(95,190,222,.36),transparent 28rem); }

/* Full mode should now feel meaningfully fuller, not merely more particles. */
body.mb-season-intensity-full.mb-season-fall .mb-hero-copy,
body.mb-season-intensity-full.mb-season-thanksgiving .mb-hero-copy { border-color:rgba(228,157,75,.48); }
body.mb-season-intensity-full.mb-season-spooky .mb-hero-copy { border-color:rgba(218,91,255,.4); box-shadow:var(--mb-shadow),0 0 45px rgba(111,30,145,.12); }
body.mb-season-intensity-full.mb-season-xmas .mb-hero-copy { border-color:rgba(136,213,239,.4); box-shadow:var(--mb-shadow),0 0 45px rgba(90,183,214,.1); }

@media (max-width:760px) {
  .mb-hero-season-scene { background-position:center; }
  body.mb-season-spooky .mb-hero-season-scene { background-position:56% center; }
  body.mb-season-xmas .mb-hero-season-scene { background-position:60% center; }
  body.mb-season-intensity-subtle .mb-hero-season-scene { opacity:.44; }
  body.mb-season-intensity-full .mb-hero-season-scene { opacity:.76; }
  .mb-season-hero-message { font-size:.75rem; border-radius:14px; }
}

@media (prefers-reduced-motion:reduce) {
  body.mb-season-spooky.mb-season-foreground-on .mb-hero-season-foreground::before { animation:none!important; }
}

/* Keep footer seasonal atmosphere above its background but behind readable content. */
body.mb-season-footer-on .mb-footer { isolation:isolate; }
body.mb-season-footer-on .mb-footer::before { z-index:2; }
body.mb-season-footer-on .mb-footer::after { z-index:0; }
body.mb-season-footer-on .mb-footer-grid { position:relative; z-index:1; }

/* ========================================================================== 
   Mana Bond v1.5 — Serious Seasonal Hero Artwork + Favicons/Admin Bar
   ========================================================================== */

/* Replace the cartoony scene/foreground layering for Spooky + Christmas with
   full cinematic hero artwork. The rest of the seasonal engine stays intact. */
body.mb-season-spooky.mb-season-hero-on .mb-hero {
  background-image: var(--mb-spooky-hero);
  background-position: center center;
  background-size: cover;
}
body.mb-season-xmas.mb-season-hero-on .mb-hero {
  background-image: var(--mb-xmas-hero);
  background-position: center center;
  background-size: cover;
}

body.mb-season-spooky.mb-season-hero-on .mb-hero-season-scene,
body.mb-season-xmas.mb-season-hero-on .mb-hero-season-scene,
body.mb-season-spooky.mb-season-foreground-on .mb-hero-season-foreground,
body.mb-season-xmas.mb-season-foreground-on .mb-hero-season-foreground {
  display: none;
}

body.mb-season-spooky .mb-hero::before {
  background: linear-gradient(90deg, rgba(2,2,6,.88) 0%, rgba(7,5,15,.58) 36%, rgba(10,7,18,.20) 62%, rgba(3,2,6,.62) 100%);
}
body.mb-season-xmas .mb-hero::before {
  background: linear-gradient(90deg, rgba(13,17,30,.54) 0%, rgba(16,21,39,.28) 36%, rgba(16,22,42,.08) 62%, rgba(7,10,18,.28) 100%);
}

body.mb-season-spooky .mb-hero-copy {
  background: linear-gradient(145deg, rgba(14,7,22,.82), rgba(6,4,12,.7));
  border-color: rgba(203,114,53,.28);
}
body.mb-season-xmas .mb-hero-copy {
  background: linear-gradient(145deg, rgba(18,23,43,.58), rgba(11,18,31,.46));
  border-color: rgba(178,218,248,.3);
}

body.mb-season-spooky.mb-season-header-on .mb-site-header {
  background: rgba(6,3,10,.82);
  border-bottom-color: rgba(222,104,48,.24);
}
body.mb-season-xmas.mb-season-header-on .mb-site-header {
  background: rgba(9,14,22,.74);
  border-bottom-color: rgba(113,205,234,.24);
}

body.mb-season-spooky .mb-brand-tagline,
body.mb-season-spooky .mb-hero p,
body.mb-season-spooky .mb-season-hero-message { color: #e8d9f4; }
body.mb-season-xmas .mb-brand-tagline,
body.mb-season-xmas .mb-hero p,
body.mb-season-xmas .mb-season-hero-message { color: #ecf3ff; }

@media (max-width: 760px) {
  body.mb-season-spooky.mb-season-hero-on .mb-hero,
  body.mb-season-xmas.mb-season-hero-on .mb-hero {
    background-position: 62% center;
  }
}

/* ========================================================================== 
   Mana Bond v1.6 — Seasonal Header Hardening
   ========================================================================== */

/* WordPress admin bar should never cover the sticky Mana Bond navigation. */
body.admin-bar .mb-site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .mb-site-header { top: 46px; }
}

/* Spooky + Christmas now rely on cinematic hero/header artwork rather than
   the old v1.4 decorative strips and pseudo-overlay ornaments. */
body.mb-season-spooky.mb-season-header-on .mb-site-header::after,
body.mb-season-xmas.mb-season-header-on .mb-site-header::after {
  content: none !important;
  display: none !important;
}

body.mb-season-spooky.mb-season-hero-on .mb-hero-season-scene,
body.mb-season-spooky.mb-season-foreground-on .mb-hero-season-foreground,
body.mb-season-xmas.mb-season-hero-on .mb-hero-season-scene,
body.mb-season-xmas.mb-season-foreground-on .mb-hero-season-foreground {
  display: none !important;
}

/* Give the cinematic images more room to read while keeping copy legible. */
body.mb-season-spooky.mb-season-hero-on .mb-hero,
body.mb-season-xmas.mb-season-hero-on .mb-hero {
  min-height: 720px;
}
body.mb-season-spooky .mb-hero-copy,
body.mb-season-xmas .mb-hero-copy {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 760px) {
  body.mb-season-spooky.mb-season-hero-on .mb-hero,
  body.mb-season-xmas.mb-season-hero-on .mb-hero {
    min-height: 650px;
  }
}


/* ========================================================================== 
   Mana Bond v1.6.2 — Serious Fall + Thanksgiving Seasonal Headers
   ========================================================================== */
body.mb-season-fall.mb-season-hero-on .mb-hero {
  background-image: var(--mb-fall-hero);
  background-position: center center;
  background-size: cover;
}
body.mb-season-thanksgiving.mb-season-hero-on .mb-hero {
  background-image: var(--mb-thanksgiving-hero);
  background-position: center center;
  background-size: cover;
}

body.mb-season-fall.mb-season-hero-on .mb-hero-season-scene,
body.mb-season-thanksgiving.mb-season-hero-on .mb-hero-season-scene,
body.mb-season-fall.mb-season-foreground-on .mb-hero-season-foreground,
body.mb-season-thanksgiving.mb-season-foreground-on .mb-hero-season-foreground {
  display: none;
}

body.mb-season-fall .mb-hero::before {
  background: linear-gradient(90deg, rgba(17,10,7,.62) 0%, rgba(34,16,11,.34) 36%, rgba(46,24,13,.08) 62%, rgba(18,10,7,.22) 100%);
}
body.mb-season-thanksgiving .mb-hero::before {
  background: linear-gradient(90deg, rgba(20,10,8,.68) 0%, rgba(36,19,11,.38) 36%, rgba(54,29,16,.10) 62%, rgba(22,11,8,.22) 100%);
}

body.mb-season-fall .mb-hero-copy {
  background: linear-gradient(145deg, rgba(45,19,12,.54), rgba(25,11,8,.42));
  border-color: rgba(255,185,108,.28);
}
body.mb-season-thanksgiving .mb-hero-copy {
  background: linear-gradient(145deg, rgba(48,24,13,.58), rgba(29,14,8,.48));
  border-color: rgba(255,203,132,.30);
}

body.mb-season-fall.mb-season-header-on .mb-site-header {
  background: rgba(21,10,9,.74);
  border-bottom-color: rgba(240,165,92,.24);
}
body.mb-season-thanksgiving.mb-season-header-on .mb-site-header {
  background: rgba(26,13,8,.76);
  border-bottom-color: rgba(240,182,111,.24);
}

body.mb-season-fall .mb-brand-tagline,
body.mb-season-fall .mb-hero p,
body.mb-season-fall .mb-season-hero-message { color: #f2e5d4; }
body.mb-season-thanksgiving .mb-brand-tagline,
body.mb-season-thanksgiving .mb-hero p,
body.mb-season-thanksgiving .mb-season-hero-message { color: #f4e8da; }

@media (max-width: 760px) {
  body.mb-season-fall.mb-season-hero-on .mb-hero,
  body.mb-season-thanksgiving.mb-season-hero-on .mb-hero {
    background-position: 58% center;
  }
}

/* ========================================================================== 
   Mana Bond v1.7 — Game Journals + Content Hub Frontend
   ========================================================================== */

.mb-game-card { display:flex; flex-direction:column; }
.mb-game-card-link { margin-top:auto; padding-top:1rem; display:inline-flex; }
.mb-games-hub-link { margin-top:1.5rem; display:flex; justify-content:center; }

.mb-latest-post-grid,
.mb-journal-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;
}
.mb-home-latest-card,
.mb-game-journal-card { margin:0; min-width:0; }
.mb-home-latest-card h3,
.mb-game-journal-card h2 { margin:.45rem 0 .6rem; font-size:1.45rem; line-height:1.2; }
.mb-home-latest-card h3 a,
.mb-game-journal-card h2 a { color:var(--mb-gold-light); }
.mb-home-latest-card .mb-post-thumb img,
.mb-game-journal-card .mb-post-thumb img { aspect-ratio:16/9; object-fit:cover; }

.mb-post-game-badges { display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:.65rem; }
.mb-post-game-badges a {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:.22rem .58rem;
  border-radius:999px;
  border:1px solid rgba(214,113,255,.3);
  background:rgba(95,34,135,.22);
  color:#e8caff;
  font-family:system-ui,sans-serif;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.mb-post-game-badges a:hover { border-color:rgba(255,211,125,.5); color:#fff1cc; }

.mb-games-hub .mb-section-heading { max-width:820px; }
.mb-game-hub-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}
.mb-game-hub-card {
  position:relative;
  min-height:360px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(224,172,82,.32);
  box-shadow:var(--mb-shadow);
  isolation:isolate;
  color:white;
  background:linear-gradient(145deg,#24102f,#0d0714);
}
.mb-game-hub-card-bg {
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(9,4,14,.06),rgba(7,3,11,.88)),
    var(--mb-game-card-image, radial-gradient(circle at 70% 30%,rgba(168,61,255,.32),transparent 26rem));
  background-size:cover;
  background-position:center;
  transition:transform .5s ease, filter .35s ease;
}
.mb-game-hub-card::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,rgba(10,5,16,.78) 0%,rgba(13,6,20,.38) 52%,rgba(8,4,12,.18) 100%);
}
.mb-game-hub-card:hover { color:white; border-color:rgba(255,211,125,.55); }
.mb-game-hub-card:hover .mb-game-hub-card-bg { transform:scale(1.035); filter:saturate(1.08); }
.mb-game-hub-card-copy { padding:2rem; display:flex; flex-direction:column; max-width:620px; }
.mb-game-hub-card-copy strong { font-size:clamp(2rem,4vw,3.25rem); line-height:1; color:#fff2d5; margin:.35rem 0 .75rem; text-shadow:0 4px 22px rgba(0,0,0,.6); }
.mb-game-hub-card-copy > span:not(.mb-kicker) { color:#e4d8ec; }
.mb-game-hub-card-copy small { margin-top:1rem; color:#ffd37d; font-family:system-ui,sans-serif; font-weight:800; }

.mb-game-journal-hero {
  max-width:940px;
  padding:2.4rem;
  border-radius:26px;
  border:1px solid var(--mb-border);
  background:radial-gradient(circle at 85% 15%,rgba(168,61,255,.22),transparent 22rem),linear-gradient(145deg,rgba(31,12,44,.92),rgba(12,6,20,.95));
  box-shadow:var(--mb-shadow);
  margin-bottom:1.25rem;
}
.mb-game-journal-hero h1 { color:#fff2d5; font-size:clamp(3rem,7vw,6rem); line-height:.95; margin:.5rem 0 .8rem; }
.mb-game-journal-description { max-width:760px; color:#e2d5eb; font-size:1.1rem; }
.mb-game-journal-description p { margin:.5rem 0; }
.mb-game-journal-meta { margin-top:1rem; color:#c5afd5; font-family:system-ui,sans-serif; font-size:.85rem; text-transform:uppercase; letter-spacing:.09em; }
.mb-game-journal-nav { display:flex; gap:.55rem; flex-wrap:wrap; margin:0 0 1.5rem; }
.mb-game-journal-nav a { padding:.55rem .8rem; border:1px solid rgba(224,172,82,.24); border-radius:999px; background:rgba(31,12,44,.7); color:#d7c6e4; font-family:system-ui,sans-serif; font-size:.82rem; font-weight:700; }
.mb-game-journal-nav a:hover { border-color:rgba(255,211,125,.55); color:#fff2d5; }
.mb-pagination-wrap { grid-column:1/-1; }

@media (max-width: 950px) {
  .mb-latest-post-grid,.mb-journal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .mb-latest-post-grid,.mb-journal-grid,.mb-game-hub-grid { grid-template-columns:1fr; }
  .mb-game-hub-card { min-height:310px; }
  .mb-game-hub-card-copy { padding:1.5rem; }
  .mb-game-journal-hero { padding:1.5rem; }
}