/* Mini toggle button */
#miniToggle {
  position: fixed;
  top: 55%;
  left: 0;
  transform: translateY(-50%);
  background: #222;
  color: #fff;
  padding: 12px 15px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  z-index: 1200;
  transition: left 0.28s cubic-bezier(.2,.9,.2,1);
}

#miniMenu ul li a:hover {
    background: #444;
}

/* When menu is open, toggle sticks to the menu */
#miniToggle.open {
    left: 220px;
}

/* Mini slide-out menu */
#miniMenu {
  position: fixed;
  top: 55%;
  left: -220px;
  transform: translateY(-50%);
  width: 220px;
  background: #1b1b1b;
  color: white;
  padding: 10px;
  border-radius: 0 8px 8px 0;
  transition: left 0.28s cubic-bezier(.2,.9,.2,1);
  z-index: 1199;
  border: 1px solid rgba(255,255,255,0.03);
}

/* When visible, left is 0 (menu.js toggles inline style left: '0px') */
#miniMenu.open { left: 0 !important; }


/* menu elements */
#miniMenu h4 { margin: 0 0 6px; color: var(--accent-c); }
#miniMenu label { font-size: 0.9rem; color: #cdd; }

/* Moon button — quarter visible in top-right corner */
.moon-btn {
  position: fixed;
  top: 0px;
  right: 0px;
  width: 56px;
  height: 56px;
  overflow: hidden; /* hide most of the circle to show a quarter */
  border-radius: 8px; /* keep container slightly rounded */
  background: transparent;
  display: inline-block;
  z-index: 99999;
  text-decoration: none;
}

.moon-btn .moon-shape {
  position: absolute;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  top: -56px;   /* push circle up so only bottom-left quarter is visible */
  right: -56px; /* push circle right so only bottom-left quarter is visible */
  background: radial-gradient(circle at 30% 30%, #d4efff, #9bc7ff);
  box-shadow: 0 0 18px #6acbff88;
  transform: translate(0,0);
  pointer-events: none;
}

.moon-btn .moon-char {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 18px;
  color: #022;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
  pointer-events: none;
}