/* MU Guide Deluxe Add‑on Pack — CSS */

/* 1) Sidebar emoji icons get a subtle gradient + glow */
.md-nav__link .md-ellipsis {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.md-nav__link .md-ellipsis > :first-child {
  background: linear-gradient(90deg,#8a3cf4,#ff7e33);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(138,60,244,.35))
          drop-shadow(0 0 10px rgba(255,126,51,.25));
}

/* 2) Section dividers (use <div class="mu-divider"><span>Title</span></div>) */
.mu-divider{
  position: relative;
  margin: 2.2rem 0 1.4rem;
  text-align:center;
}
.mu-divider::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:2px; transform:translateY(-50%);
  background:
    linear-gradient(90deg, rgba(138,60,244,0), rgba(138,60,244,.6) 20%, rgba(255,126,51,.6) 80%, rgba(255,126,51,0));
  filter: drop-shadow(0 0 10px rgba(138,60,244,.35));
}
.mu-divider > span{
  position:relative; display:inline-block; padding:.2rem .8rem;
  background: rgba(16,18,23,.9);
  border-radius:999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  color:#fff; font-weight:800; letter-spacing:.3px;
}

/* 3) Search highlight (Material uses <mark>) */
.md-typeset mark{
  background: linear-gradient(90deg, rgba(138,60,244,.25), rgba(255,126,51,.25));
  color:#fff; padding:.05rem .25rem; border-radius:.25rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 10px rgba(138,60,244,.35);
}

/* 4) Event callouts */
.mu-callout{
  display:flex; align-items:center;
  position:relative; padding:1rem 1rem 1rem 3.2rem; border-radius:10px; margin:1rem 0;
  background: rgba(16,18,23,.85);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35);
}
.mu-callout::before{ content: none !important; }
.mu-callout.mu-bc   { border-left:4px solid #ff554d; } /* Blood Castle */
.mu-callout.mu-ds   { border-left:4px solid #2e6bff; } /* Devil Square */
.mu-callout.mu-cc   { border-left:4px solid #aaaaaa; } /* Chaos Castle */
.mu-callout.mu-br   { border-left:4px solid #ff7e33; } /* Battle Royal */
.mu-callout.mu-info { border-left:4px solid #8a3cf4; } /* Generic info */

/* 5) Image scroll reveal */
.mu-reveal{
  opacity:0; transform: translateY(12px) scale(.98);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
  filter: saturate(.9) brightness(.95);
}
.mu-reveal.mu-in{
  opacity:1; transform: translateY(0) scale(1);
  filter: saturate(1) brightness(1);
}

/* 6) Back-to-top jewel button */
#mu-top{
  position:fixed; right:18px; bottom:18px; z-index:20;
  width:44px; height:44px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ff9a59, #8a3cf4);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 16px rgba(138,60,244,.45);
  display:none; place-items:center; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#mu-top::before{
  content:"▲"; color:#fff; font-size:14px;
  text-shadow: 0 0 8px rgba(255,255,255,.6);
}
#mu-top:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 24px rgba(255,126,51,.55); }
#mu-top.mu-show{ display:grid; opacity:1; }

/* Invasion-specific callouts (emoji keeps natural color) */
.mu-callout.mu-rabbit { border-left:4px solid #ffb6c1; } /* Rabbit Invasion */
.mu-callout.mu-red-dragon { border-left:4px solid #ff4d4d; } /* Red Dragon */
.mu-callout.mu-white-wizard { border-left:4px solid #ffffff; } /* White Wizard */
.mu-callout.mu-demon { border-left:4px solid #8b0000; } /* Demon */
.mu-callout.mu-evomoon { border-left:4px solid #9370db; } /* Evo Moon */
.mu-callout.mu-death-bone { border-left:4px solid #696969; } /* Death Bone */
.mu-callout.mu-pouch { border-left:4px solid #daa520; } /* Pouch of Blessing */
.mu-callout.mu-fire-flame { border-left:4px solid #ff4500; } /* Fire Flame Ghost */
.mu-callout.mu-horse { border-left:4px solid #deb887; } /* Golden Horse */
.mu-callout.mu-goat { border-left:4px solid #f5deb3; } /* Golden Goat */
.mu-callout.mu-monkey { border-left:4px solid #ffe4b5; } /* Golden Monkey */
.mu-callout.mu-goblin { border-left:4px solid #00ff7f; } /* Goblin Vulcanus */

/* Ensure emoji in .mu-icon keeps system color */
.mu-callout .mu-icon{
  all: revert;
  display:inline-block;
  font-size:1.4rem;
  line-height:1;
  margin-right:.5rem;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol", emoji !important;
  color: initial !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
  filter: none !important;
}