/* shared.css — UI shared by all Don's Cons pages.
   Each page still defines the theme variables (--gold, --ink, --cream, …) in its
   own :root; these rules just consume them. */

/* Mute toggle (bottom-right) */
#mute-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 60; width: 46px; height: 46px;
  border-radius: 50%; border: 2px solid var(--gold); background: rgba(10, 19, 38, 0.72); color: var(--gold);
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7); transition: background .15s;
}
#mute-toggle:hover { background: rgba(10, 19, 38, 0.92); }

/* Top-right white hamburger menu */
.top-menu { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; z-index: 1500; }
.top-menu-btn {
  width: 40px; height: 40px; border-radius: 8px; background: transparent; border: none;
  box-shadow: none; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 0; transition: transform 0.12s ease;
}
.top-menu-btn:active { transform: translateY(1px); }
.top-menu-btn span { display: block; width: 24px; height: 2.5px; background: #fff; border-radius: 2px; }
.top-menu-drop {
  position: absolute; top: 52px; right: 0; min-width: 200px; background: var(--ink);
  border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.top-menu-item {
  display: block; width: 100%; box-sizing: border-box; padding: 14px 18px; background: transparent;
  color: var(--cream); border: none; text-align: left; font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.5px; text-transform: uppercase; font-family: inherit; cursor: pointer;
  text-decoration: none; border-bottom: 1px solid rgba(255, 206, 31, 0.18);
}
.top-menu-item:last-child { border-bottom: none; }
.top-menu-item:hover { background: rgba(255, 206, 31, 0.08); }
.top-menu-item.top-menu-danger { color: #ff7d6b; }