/* =========================================================================
   VOID watermark — purple theme (v2)
   - fixed bottom-right
   - logo stacked above handle
   - tight spacing + subtle neon glow
   ======================================================================= */

.void-watermark {
  position: fixed;
  right: clamp(10px, 2vw, 16px);
  bottom: clamp(10px, 2vh, 16px);
  z-index: 5000;
  display: flex;
  flex-direction: column;         /* logo above handle */
  align-items: center;
  gap: -20px;                       /* tighter gap */
  text-align: center;
  pointer-events: auto;
}

/* --- Logo --- */
.void-watermark img {
  width: 104px;                   /* slightly smaller */
  max-width: 130px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter:
    drop-shadow(0 0 12px rgba(160, 0, 255, .60))
    drop-shadow(0 0 24px rgba(160, 0, 255, .40));
  transition: transform .22s ease, filter .22s ease;
  animation: purplePulse 4s ease-in-out infinite;
}

.void-watermark img:hover {
  transform: scale(1.06);
  filter:
    drop-shadow(0 0 16px rgba(185, 60, 255, .85))
    drop-shadow(0 0 32px rgba(185, 60, 255, .55));
}

/* --- Handle (Instagram link) --- */
.void-watermark a {
  display: inline-flex;
  align-items: center;
  gap: 6px;                       /* small space between icon & text */
  color: #a64dff;                 /* purple */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
  font-size: .82rem;              /* slightly smaller */
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
  padding: .28rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(168, 0, 255, .25);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    0 0 0 1px rgba(168,0,255,.18) inset,
    0 0 14px rgba(168,0,255,.25);
  transition: color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.void-watermark a:hover,
.void-watermark a:focus-visible {
  color: #d6b3ff;
  border-color: rgba(168,0,255,.45);
  box-shadow:
    0 0 0 1px rgba(168,0,255,.32) inset,
    0 0 18px rgba(168,0,255,.35);
  outline: none;
}

/* inline IG icon */
.void-watermark .ig-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;             /* inherits purple */
  filter: drop-shadow(0 0 6px rgba(168,0,255,.45));
}

/* --- Animations --- */
@keyframes purplePulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(160,0,255,.6)) drop-shadow(0 0 24px rgba(160,0,255,.4)); }
  50%      { filter: drop-shadow(0 0 20px rgba(185,60,255,.9)) drop-shadow(0 0 36px rgba(185,60,255,.55)); }
}

/* --- Safe-area clearance (iOS home indicator) --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .void-watermark { bottom: calc(env(safe-area-inset-bottom) + 12px); }
}

/* --- Small screens --- */
@media (max-width: 480px) {
  .void-watermark { right: 10px; gap: 4px; }
  .void-watermark img { width: 96px; }     /* nudge smaller on phones */
  .void-watermark a { font-size: .8rem; padding: .26rem .46rem; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .void-watermark * { animation: none !important; transition: none !important; }
}
/* === OVERRIDE: Tighten VOID logo + handle spacing === */
.void-watermark {
  gap: 2px !important; /* reduce space between logo + handle */
}

.void-watermark img {
  margin-bottom: -3px !important; /* pull logo closer to handle */
}
/* ===== FINAL OVERRIDE: tighten VOID logo + handle ===== */
.void-watermark{
  display: flex !important;
  flex-direction: column !important;
  row-gap: 0 !important;          /* explicit gap kill */
  column-gap: 0 !important;
  gap: 0 !important;
}

.void-watermark > *{
  margin: 0 !important;           /* nuke any default margins */
}

.void-watermark img{
  display: block !important;
  margin: 0 0 -6px 0 !important;  /* pull logo closer to the handle */
  width: 100px !important;        /* optional: slightly smaller */
}

/* if your old class (.void-mark) is still present anywhere, kill its spacing too */
.void-mark{
  gap: 0 !important;
}
.void-mark img{
  margin-bottom: -6px !important;
}
/* === Override: Compact VOID watermark === */
.void-watermark {
  position: fixed !important;
  right: clamp(8px, 1.5vw, 14px) !important;
  bottom: clamp(8px, 1.5vh, 14px) !important;
  display: flex !important;
  flex-direction: column !important; /* stack logo above text */
  align-items: center !important;
  gap: 1px !important;              /* minimal space between logo + text */
  z-index: 5000 !important;
  text-align: center !important;
}

.void-watermark img {
  width: 56px !important;           /* smaller logo */
  height: auto !important;
  margin: 0 !important;             /* no extra spacing */
  filter:
    drop-shadow(0 0 8px rgba(160, 0, 255, 0.55))
    drop-shadow(0 0 18px rgba(160, 0, 255, 0.35)) !important;
}

.void-watermark a {
  font-size: 0.7rem !important;     /* smaller text */
  padding: .2rem .4rem !important;
  gap: 2px !important;
  color: #a64dff !important;
  font-weight: 600 !important;
}

/* --- Watermark compact override --- */
.void-watermark{
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 5000;
  display: flex;
  flex-direction: column;   /* logo above handle */
  align-items: center;
  gap: 2px;                 /* very tight gap */
  text-align: center;
}

/* smaller logo + closer to handle */
.void-watermark img{
  width: 86px;              /* shrink */
  height: auto;
  margin-bottom: -2px;      /* pull logo toward handle */
  filter:
    drop-shadow(0 0 10px rgba(160,0,255,.6))
    drop-shadow(0 0 20px rgba(160,0,255,.4));
}

/* handle + icon */
.void-watermark .void-ig{
  display: inline-flex;
  align-items: center;
  gap: 4px;                 /* icon–text spacing */
  padding: .22rem .44rem;
  border-radius: 999px;
  font: 600 .78rem/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: #b86bff;
  text-decoration: none;
  border: 1px solid rgba(168,0,255,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    0 0 0 1px rgba(168,0,255,.18) inset,
    0 0 12px rgba(168,0,255,.25);
}

.void-watermark .void-ig:hover{ color:#e5d6ff; }

/* the inline SVG takes currentColor, so it will be purple */
.void-watermark .ig-icon{
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  color: currentColor;  /* inherits from link */
  filter: drop-shadow(0 0 6px rgba(168,0,255,.45));
}

/* small screens */
@media (max-width: 480px){
  .void-watermark{ right: 10px; bottom: 10px; }
  .void-watermark img{ width: 80px; }
  .void-watermark .void-ig{ font-size: .76rem; padding: .2rem .4rem; }
}