/* ═══════════════════════════════════════════════════════
   📢 Notice Board X MaHaLnwVa — Public CSS v2.3.0
   Architecture: Theme effects NEVER override User Settings
   ───────────────────────────────────────────────────────
   LAYER SEPARATION:
   • Theme (CSS ::before/::after)  = decorative overlay only
   • User Settings (inline style)  = background, border, text colors
   • Aura (filter on .nbx-wrap)    = glow outside, doesn't affect theme
   • 3D shadow (filter on runner)  = text depth
   Created by mahainw-va-vk
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   OUTER WRAPPER
   • Width / positioning only
   • Aura filter goes here so it CANNOT affect
     ::before/::after inside .nbx-board
═══════════════════════════════════════════════ */
.nbx-wrap {
  position: relative;
  display: block;
  max-width: 100%;
}

/*
  AURA on .nbx-wrap NOT on .nbx-board.
  This is critical: CSS filter on a parent propagates to children.
  If we put filter on .nbx-board, theme ::before/::after get the
  drop-shadow too → double-glow artifact.
  By putting it on .nbx-wrap (outside .nbx-board), only the composed
  bitmap of .nbx-board gets the glow — theme effects stay clean.
*/
.nbx-has-aura {
  filter:
    drop-shadow(0 0  8px var(--nbx-aura-color,#ffd700))
    drop-shadow(0 0 24px color-mix(in srgb,var(--nbx-aura-color,#ffd700) 55%,transparent))
    drop-shadow(0 0 48px color-mix(in srgb,var(--nbx-aura-color,#ffd700) 28%,transparent));
  animation: nbx-aura-pulse 2.4s ease-in-out infinite;
}
@keyframes nbx-aura-pulse {
  0%,100% {
    filter:
      drop-shadow(0 0  6px var(--nbx-aura-color,#ffd700))
      drop-shadow(0 0 18px color-mix(in srgb,var(--nbx-aura-color,#ffd700) 45%,transparent))
      drop-shadow(0 0 36px color-mix(in srgb,var(--nbx-aura-color,#ffd700) 20%,transparent));
  }
  50% {
    filter:
      drop-shadow(0 0 12px var(--nbx-aura-color,#ffd700))
      drop-shadow(0 0 30px color-mix(in srgb,var(--nbx-aura-color,#ffd700) 65%,transparent))
      drop-shadow(0 0 58px color-mix(in srgb,var(--nbx-aura-color,#ffd700) 32%,transparent));
  }
}
/* Fallback: browsers without color-mix */
@supports not (color: color-mix(in srgb,red,blue)) {
  .nbx-has-aura {
    filter: drop-shadow(0 0 10px var(--nbx-aura-color,#ffd700))
            drop-shadow(0 0 28px var(--nbx-aura-color,#ffd700));
    animation: nbx-aura-fb 2.4s ease-in-out infinite;
  }
  @keyframes nbx-aura-fb {
    0%,100% { filter: drop-shadow(0 0  7px var(--nbx-aura-color)) drop-shadow(0 0 20px var(--nbx-aura-color)); }
    50%     { filter: drop-shadow(0 0 14px var(--nbx-aura-color)) drop-shadow(0 0 40px var(--nbx-aura-color)); }
  }
}

/* ═══════════════════════════════════════════════
   BASE BOARD
   • No border/background here — set by inline style from user settings
   • align-items:stretch so title & track fill full height
═══════════════════════════════════════════════ */
.nbx-board {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Animated gradient border overlay (user-controlled) */
.nbx-border-grad {
  position: absolute; inset: 0; border-radius: inherit;
  padding: var(--nbx-bw,2px);
  background: var(--nbx-grad,#ffd700);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 10;
  animation: nbx-brot 4s linear infinite;
}
@keyframes nbx-brot { to { filter: hue-rotate(360deg); } }

/* ═══════════════════════════════════════════════
   TITLE ZONE
═══════════════════════════════════════════════ */
.nbx-title-zone {
  display: flex;
  align-items: center;
  padding: 0 16px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
  align-self: stretch;
  z-index: 2;
  border-right: 1px solid rgba(255,255,255,.12);
  position: relative;
}

/* ═══════════════════════════════════════════════
   MARQUEE TRACK + RUNNER (vertical center fixed)
═══════════════════════════════════════════════ */
.nbx-track {
  flex: 1;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  align-items: center;
  z-index: 2;
  position: relative;
  min-width: 0;
}
.nbx-runner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-weight: 600;
  will-change: transform;
  animation: nbx-rtl var(--nbx-dur,18s) linear infinite;
}
.nbx-item {
  flex-shrink: 0;
  padding-right: 80px;
  line-height: 1.4;
}
.nbx-runner.nbx-ltr    { animation-name: nbx-ltr; }
.nbx-runner.nbx-static { animation:none; width:100%; justify-content:center; }
.nbx-runner.nbx-static .nbx-item + .nbx-item { display:none; }

@media (hover:hover) {
  .nbx-board:hover .nbx-runner { animation-play-state:paused; }
}
@keyframes nbx-rtl { from{transform:translateX(0)}        to{transform:translateX(-33.333%)} }
@keyframes nbx-ltr { from{transform:translateX(-33.333%)} to{transform:translateX(0)} }

/* ═══════════════════════════════════════════════
   TEXT ANIMATIONS (user-controlled)
═══════════════════════════════════════════════ */
.nbx-txa-glow    .nbx-runner { animation:nbx-rtl var(--nbx-dur) linear infinite,nbx-glow 3s ease-in-out infinite; }
.nbx-txa-rainbow .nbx-runner { animation:nbx-rtl var(--nbx-dur) linear infinite,nbx-rainbow 4s linear infinite; }
.nbx-txa-flicker .nbx-runner { animation:nbx-rtl var(--nbx-dur) linear infinite,nbx-flicker 1.8s steps(1) infinite; }
.nbx-dir-ltr.nbx-txa-glow    .nbx-runner { animation-name:nbx-ltr,nbx-glow; }
.nbx-dir-ltr.nbx-txa-rainbow .nbx-runner { animation-name:nbx-ltr,nbx-rainbow; }
.nbx-dir-ltr.nbx-txa-flicker .nbx-runner { animation-name:nbx-ltr,nbx-flicker; }
@keyframes nbx-glow    { 0%,100%{filter:brightness(1)   drop-shadow(0 0  5px currentColor)} 50%{filter:brightness(1.4) drop-shadow(0 0 16px currentColor)} }
@keyframes nbx-rainbow { to{filter:hue-rotate(360deg)} }
@keyframes nbx-flicker { 0%,19%,21%,23%,100%{opacity:1} 20%,22%{opacity:.15} }
.nbx-txa-wave .nbx-item           { display:inline-block; animation:nbx-wave 1.4s ease-in-out infinite; }
.nbx-txa-wave .nbx-item:nth-child(2) { animation-delay:.12s; }
.nbx-txa-wave .nbx-item:nth-child(3) { animation-delay:.24s; }
@keyframes nbx-wave { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* 3D shadow: filter works on gradient text */
.nbx-3d .nbx-runner {
  filter:
    drop-shadow(1px 1px 0px rgba(0,0,0,.9))
    drop-shadow(2px 2px 0px rgba(0,0,0,.7))
    drop-shadow(3px 3px 3px rgba(0,0,0,.5))
    drop-shadow(0 0 8px currentColor);
}

/* ═══════════════════════════════════════════════
   TITLE ANIMATIONS (user-controlled)
═══════════════════════════════════════════════ */
.nbx-ta-pulse  .nbx-title-text { animation:nbx-ta-pulse  2s ease-in-out infinite; }
.nbx-ta-bounce .nbx-title-text { animation:nbx-ta-bounce 1.1s cubic-bezier(.36,.07,.19,.97) infinite; }
.nbx-ta-shake  .nbx-title-text { animation:nbx-ta-shake  .7s ease-in-out infinite; }
.nbx-ta-flip   .nbx-title-text { animation:nbx-ta-flip   2.5s ease-in-out infinite; }
.nbx-ta-swing  .nbx-title-text { animation:nbx-ta-swing  2s ease-in-out infinite; transform-origin:top center; }
@keyframes nbx-ta-pulse  { 0%,100%{transform:scale(1)}    50%{transform:scale(1.08)} }
@keyframes nbx-ta-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes nbx-ta-shake  { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-6deg)} 40%{transform:rotate(6deg)} 60%{transform:rotate(-3deg)} 80%{transform:rotate(3deg)} }
@keyframes nbx-ta-flip   { 0%,90%,100%{transform:rotateY(0)} 45%{transform:rotateY(22deg)} }
@keyframes nbx-ta-swing  { 0%,100%{transform:rotate(0)} 20%{transform:rotate(8deg)} 40%{transform:rotate(-6deg)} 60%{transform:rotate(4deg)} 80%{transform:rotate(-2deg)} }

/* ═══════════════════════════════════════════════
   8 SHAPES (user-controlled)
═══════════════════════════════════════════════ */
.nbx-shape-sharp    { border-radius:0; }
.nbx-shape-rounded  { border-radius:10px; }
.nbx-shape-pill     { border-radius:999px; }
.nbx-shape-ribbon   { clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,18px 50%); border-radius:0; }
.nbx-shape-hexbar   { clip-path:polygon(20px 0%,calc(100% - 20px) 0%,100% 50%,calc(100% - 20px) 100%,20px 100%,0% 50%); border-radius:0; }
.nbx-shape-diagonal { clip-path:polygon(0 0,calc(100% - 28px) 0,100% 100%,0 100%); border-radius:0; }
.nbx-shape-wave_edge {
  border-radius:0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 8Q10 0 20 8Q30 16 40 8Q50 0 60 8Q70 16 80 8Q90 0 100 8Q110 16 120 8Q130 0 140 8Q150 16 160 8Q170 0 180 8Q190 16 200 8L200 32Q190 24 180 32Q170 40 160 32Q150 24 140 32Q130 40 120 32Q110 24 100 32Q90 40 80 32Q70 24 60 32Q50 40 40 32Q30 24 20 32Q10 40 0 32Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 8Q10 0 20 8Q30 16 40 8Q50 0 60 8Q70 16 80 8Q90 0 100 8Q110 16 120 8Q130 0 140 8Q150 16 160 8Q170 0 180 8Q190 16 200 8L200 32Q190 24 180 32Q170 40 160 32Q150 24 140 32Q130 40 120 32Q110 24 100 32Q90 40 80 32Q70 24 60 32Q50 40 40 32Q10 40 0 32Z' fill='black'/%3E%3C/svg%3E");
}
.nbx-shape-double_bar {
  border-top:var(--nbx-bw,2px) solid var(--nbx-bcolor,#ffd700);
  border-bottom:var(--nbx-bw,2px) solid var(--nbx-bcolor,#ffd700);
  border-left:none; border-right:none; border-radius:0;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width:768px) { .nbx-title-zone{padding:0 10px} .nbx-item{padding-right:48px} }
@media (max-width:480px) { .nbx-title-zone{padding:0 8px;font-size:85%!important} .nbx-item{padding-right:32px} }

/* ═══════════════════════════════════════════════════════════════════════
   12 THEMES — PURE OVERLAY EFFECTS ONLY
   ───────────────────────────────────────────────────────────────────────
   RULES:
   • NO border / !important — user border setting is always respected
   • NO box-shadow on .nbx-board — user aura controls glow
   • NO background — user bg setting is always respected
   • Theme ONLY uses ::before / ::after pseudo-elements inside .nbx-board
   • z-index 4 (::before) and 5 (::after) stay below content z-index:2
     Wait — content is z-index:2, so theme effects at z:4/5 would cover content!
     CORRECT z-index: theme effects z-index:1 (below content z-index:2)
   • pointer-events:none on all pseudo-elements
═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   01 · NEON PULSE
   Effect: animated horizontal scanline bands (cyan tint)
   Secondary: subtle cyan edge tint left+right
────────────────────────────────────────────────────────── */
.nbx-theme-neon_pulse::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(0,229,255,.065) 2px, rgba(0,229,255,.065) 4px
  );
  animation: t01-scan 6s linear infinite;
}
.nbx-theme-neon_pulse::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,229,255,.09) 0%, transparent 14%) ,
    linear-gradient(270deg, rgba(191,0,255,.07) 0%, transparent 14%);
  animation: t01-edge 3.5s ease-in-out infinite;
}
@keyframes t01-scan { from{background-position:0 0} to{background-position:0 -40px} }
@keyframes t01-edge { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ──────────────────────────────────────────────────────────
   02 · GOLD CASINO
   Effect: diagonal bright shimmer sweep across full board
   Secondary: repeating thin gold top-edge glint line
────────────────────────────────────────────────────────── */
.nbx-theme-gold_casino::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(
    108deg,
    transparent 15%,
    rgba(255,215,0,.16) 44%, rgba(255,245,160,.28) 50%, rgba(255,215,0,.16) 56%,
    transparent 85%
  );
  background-size:200% 100%;
  animation: t02-shimmer 2.4s linear infinite;
}
.nbx-theme-gold_casino::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  pointer-events:none; z-index:1;
  background: linear-gradient(90deg,transparent 0%,rgba(255,240,160,.95) 50%,transparent 100%);
  animation: t02-glint 2.4s linear infinite;
  animation-delay:.6s;
}
@keyframes t02-shimmer { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes t02-glint   { 0%,35%,100%{opacity:0} 42%,58%{opacity:1} 65%{opacity:0} }

/* ──────────────────────────────────────────────────────────
   03 · FIRE BLAZE
   Effect: radial heat pulse from bottom center
   Secondary: animated ember line along bottom edge
────────────────────────────────────────────────────────── */
.nbx-theme-fire_blaze::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 75% 80% at 50% 120%, rgba(255,80,0,.38), transparent 55%),
    radial-gradient(ellipse 35% 55% at 18% 60%,  rgba(255,140,0,.13), transparent),
    radial-gradient(ellipse 35% 55% at 82% 60%,  rgba(255,50,0,.13),  transparent);
  animation: t03-fire 1.6s ease-in-out infinite;
}
.nbx-theme-fire_blaze::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  pointer-events:none; z-index:1;
  background: linear-gradient(90deg,
    transparent,rgba(255,120,0,.8) 20%,rgba(255,200,0,1) 50%,rgba(255,60,0,.8) 80%,transparent);
  animation: t03-ember 1.6s ease-in-out infinite;
  filter: blur(.4px);
}
@keyframes t03-fire  { 0%,100%{opacity:.55;transform:scaleY(1)}   50%{opacity:1;transform:scaleY(1.05)} }
@keyframes t03-ember { 0%,100%{opacity:.25;filter:blur(1px)}      50%{opacity:1;filter:blur(.3px)} }

/* ──────────────────────────────────────────────────────────
   04 · ICE CRYSTAL
   Effect: cold edge frost (left/right + top/bottom)
   Secondary: slow moving ice-light shimmer band
────────────────────────────────────────────────────────── */
.nbx-theme-ice_crystal::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(90deg,  rgba(0,229,255,.16) 0%,transparent 16%,transparent 84%,rgba(160,224,255,.16) 100%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%,transparent 30%,transparent 70%,rgba(200,240,255,.07) 100%);
}
.nbx-theme-ice_crystal::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(
    118deg,
    transparent 25%,
    rgba(220,245,255,.22) 46%, rgba(255,255,255,.32) 50%, rgba(220,245,255,.22) 54%,
    transparent 75%
  );
  background-size:200% 100%;
  animation: t04-ice 5s ease-in-out infinite;
}
@keyframes t04-ice { 0%,100%{background-position:-200% 0} 55%{background-position:200% 0} }

/* ──────────────────────────────────────────────────────────
   05 · ROYAL PURPLE
   Effect: blinking sparkle dots (6 positions)
   Secondary: glowing purple-gold bottom bar
────────────────────────────────────────────────────────── */
.nbx-theme-royal_purple::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(circle 2.5px at 10% 30%, rgba(255,215,0,.95), transparent 5px),
    radial-gradient(circle 2px   at 90% 68%, rgba(255,215,0,.80), transparent 4px),
    radial-gradient(circle 1.5px at 50% 22%, rgba(255,180,255,.90),transparent 3px),
    radial-gradient(circle 2.5px at 74% 78%, rgba(210,0,255,.75), transparent 5px),
    radial-gradient(circle 1.5px at 33% 72%, rgba(255,215,0,.70), transparent 3px),
    radial-gradient(circle 1px   at 60% 48%, rgba(255,180,255,.80),transparent 2px);
  animation: t05-sparkle 2.2s ease-in-out infinite;
}
.nbx-theme-royal_purple::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  pointer-events:none; z-index:1;
  background: linear-gradient(90deg,
    transparent,rgba(160,0,255,.7) 20%,rgba(255,215,0,.9) 50%,rgba(160,0,255,.7) 80%,transparent);
  animation: t05-bar 2.2s ease-in-out infinite;
}
@keyframes t05-sparkle { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.1;transform:scale(.7)} }
@keyframes t05-bar     { 0%,100%{opacity:.25} 50%{opacity:1} }

/* ──────────────────────────────────────────────────────────
   06 · CYBER MATRIX
   Effect: scrolling vertical grid (digit-rain columns)
   Secondary: top-to-bottom brightness pulse
────────────────────────────────────────────────────────── */
.nbx-theme-cyber_matrix::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 18px,
      rgba(0,230,118,.06) 18px, rgba(0,230,118,.06) 19px),
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 9px,
      rgba(0,230,118,.04) 9px, rgba(0,230,118,.04) 10px);
  animation: t06-grid 2.2s linear infinite;
}
.nbx-theme-cyber_matrix::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(180deg,
    rgba(0,230,118,.12) 0%, transparent 35%, transparent 65%, rgba(0,230,118,.08) 100%);
  animation: t06-pulse 2.2s ease-in-out infinite;
}
@keyframes t06-grid  { from{background-position:0 0,0 0} to{background-position:0 0,0 -40px} }
@keyframes t06-pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ──────────────────────────────────────────────────────────
   07 · ROSE GOLD
   Effect: diagonal pink-gold shimmer
   Secondary: soft left+right rose-gold edge vignette
────────────────────────────────────────────────────────── */
.nbx-theme-rose_gold::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(
    108deg,
    transparent 18%,
    rgba(255,100,160,.19) 44%, rgba(255,210,210,.28) 50%, rgba(255,100,160,.19) 56%,
    transparent 82%
  );
  background-size:200% 100%;
  animation: t07-shimmer 3.2s linear infinite;
}
.nbx-theme-rose_gold::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(90deg,  rgba(255,80,140,.12) 0%,transparent 22%),
    linear-gradient(270deg, rgba(255,160,100,.10) 0%,transparent 22%);
  animation: t07-edge 3.2s ease-in-out infinite;
}
@keyframes t07-shimmer { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes t07-edge    { 0%,100%{opacity:.45} 50%{opacity:1} }

/* ──────────────────────────────────────────────────────────
   08 · DARK NEON
   Effect: fine dot grid pattern
   Secondary: single cyan line sweeps left→right
────────────────────────────────────────────────────────── */
.nbx-theme-dark_neon::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(circle 1px at center, rgba(0,229,255,.18) 0%, transparent 1px) 0 0/20px 20px;
}
.nbx-theme-dark_neon::after {
  content:''; position:absolute; top:0; bottom:0; left:-80%; width:40%;
  pointer-events:none; z-index:1;
  background: linear-gradient(90deg,transparent,rgba(0,229,255,.55),transparent);
  animation: t08-sweep 3.5s linear infinite;
  filter: blur(.5px);
}
@keyframes t08-sweep { from{left:-80%} to{left:140%} }

/* ──────────────────────────────────────────────────────────
   09 · HOLOGRAM
   Effect: shifting rainbow iridescent wash (full board)
   Secondary: bright diagonal specular band
────────────────────────────────────────────────────────── */
.nbx-theme-hologram::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(135deg,
    rgba(255,0,120,.16) 0%,  rgba(0,180,255,.16) 20%,
    rgba(0,255,180,.13) 40%, rgba(255,200,0,.16) 60%,
    rgba(180,0,255,.14) 80%, rgba(255,0,120,.16) 100%);
  background-size:400% 100%;
  animation: t09-holo 4s linear infinite;
}
.nbx-theme-hologram::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255,255,255,.20) 46%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.20) 54%,
    transparent 72%
  );
  background-size:200% 100%;
  animation: t09-band 2.2s linear infinite;
}
@keyframes t09-holo { from{background-position:0 0}   to{background-position:400% 0} }
@keyframes t09-band { from{background-position:-200% 0} to{background-position:200% 0} }

/* ──────────────────────────────────────────────────────────
   10 · LAVA LAMP
   Effect: morphing radial lava blobs (orange/red/yellow)
   Secondary: animated molten bottom edge line
────────────────────────────────────────────────────────── */
.nbx-theme-lava_lamp::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 52% 90% at 18% 65%, rgba(255,80,0,.30), transparent 52%),
    radial-gradient(ellipse 40% 70% at 70% 40%, rgba(255,200,0,.22), transparent 50%),
    radial-gradient(ellipse 28% 55% at 50% 80%, rgba(255,110,0,.16), transparent 50%);
  animation: t10-blob 2.8s ease-in-out infinite;
}
.nbx-theme-lava_lamp::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  pointer-events:none; z-index:1;
  background: linear-gradient(90deg,
    transparent,rgba(255,140,0,.85) 18%,rgba(255,220,0,1) 50%,rgba(255,60,0,.85) 82%,transparent);
  animation: t10-lava 2.8s ease-in-out infinite;
  filter: blur(.4px);
}
@keyframes t10-blob { 0%,100%{opacity:.55;transform:scaleX(1)}   50%{opacity:1;transform:scaleX(1.05)} }
@keyframes t10-lava { 0%,100%{opacity:.3;filter:blur(1px)} 50%{opacity:1;filter:blur(.3px)} }

/* ──────────────────────────────────────────────────────────
   11 · ARCTIC AURORA
   Effect: horizontal aurora light band sweeping slowly
   Secondary: shimmering teal top edge line
────────────────────────────────────────────────────────── */
.nbx-theme-arctic_aurora::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(90deg,
    rgba(0,255,128,.0) 0%,  rgba(0,200,255,.20) 22%,
    rgba(100,0,255,.13) 44%, rgba(0,255,200,.18) 66%,
    rgba(80,0,200,.10) 88%,  rgba(0,255,128,.0) 100%);
  animation: t11-aurora 5.5s ease-in-out infinite;
}
.nbx-theme-arctic_aurora::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  pointer-events:none; z-index:1;
  background: linear-gradient(90deg,
    transparent,rgba(0,255,200,.75) 28%,rgba(140,210,255,.90) 50%,rgba(0,255,200,.75) 72%,transparent);
  animation: t11-top 5.5s ease-in-out infinite;
  filter: blur(.4px);
}
@keyframes t11-aurora { 0%,100%{transform:translateX(-16%);opacity:.5} 50%{transform:translateX(16%);opacity:1} }
@keyframes t11-top    { 0%,100%{opacity:.18} 50%{opacity:.85} }

/* ──────────────────────────────────────────────────────────
   12 · OBSIDIAN GOLD
   Effect: side edge gold radial glow (permanent subtle)
   Secondary: slow-pulse animated top gold line
────────────────────────────────────────────────────────── */
.nbx-theme-obsidian_gold::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 24% 100% at  5% 50%, rgba(255,215,0,.18), transparent),
    radial-gradient(ellipse 24% 100% at 95% 50%, rgba(255,215,0,.18), transparent),
    radial-gradient(ellipse 80%  28% at 50%  0%, rgba(255,215,0,.07), transparent);
}
.nbx-theme-obsidian_gold::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  pointer-events:none; z-index:1;
  background: linear-gradient(90deg,
    transparent,rgba(255,215,0,.85) 28%,rgba(255,245,160,1) 50%,rgba(255,215,0,.85) 72%,transparent);
  animation: t12-line 3.8s ease-in-out infinite;
}
@keyframes t12-line { 0%,100%{opacity:.18} 50%{opacity:.95} }

/* ═══════════════════════════════════════════════
   REDUCE MOTION
═══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  .nbx-runner, .nbx-border-grad, .nbx-has-aura,
  .nbx-title-text, .nbx-board::before, .nbx-board::after {
    animation:none!important; transition:none!important;
  }
}