/* share-gag.css — the image action bar, the share popover, and the whiplash gag veil. purple house. */

.oz-share-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; position: relative; }
.oz-sb-btn {
  height: 28px; padding: 0 11px; border: 1px solid rgba(179,136,255,.32); border-radius: 7px;
  background: rgba(124,77,255,.14); color: #e8e3ff; font: 600 var(--fs-ui)/1 system-ui; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.oz-sb-btn:hover { background: rgba(124,77,255,.28); }
.oz-sb-gal { border-color: rgba(95,224,154,.4); }
.oz-sb-rm { border-color: rgba(255,122,122,.4); color: #ffbdbd; }
/* the temptation — dressed as a real, friendly social CTA so the whiplash lands. */
.oz-sb-fb {
  margin-left: auto; background: #1877f2; border-color: #1877f2; color: #fff;
}
.oz-sb-fb:hover { background: #2a86ff; border-color: #2a86ff; }
.oz-sb-stamp { color: #9a90c4; font: var(--fs-ui) ui-monospace, monospace; margin-left: 8px; }

.oz-sb-toast {
  position: absolute; right: 0; bottom: -26px; background: rgba(95,224,154,.16); color: #5fe09a;
  border: 1px solid rgba(95,224,154,.4); border-radius: 6px; padding: 3px 9px; font: 600 var(--fs-ui) system-ui;
  opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.oz-sb-toast.go { opacity: 1; transform: translateY(0); }

/* the share popover */
.oz-share-menu {
  position: fixed; z-index: 9998; min-width: 230px; background: #1a1626; border: 1px solid rgba(179,136,255,.4);
  border-radius: 10px; padding: 6px; box-shadow: 0 14px 44px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 2px;
}
.oz-share-menu button {
  text-align: left; background: transparent; border: 0; color: #e8e3ff; font: var(--fs-ui) system-ui;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
}
.oz-share-menu button:hover { background: rgba(124,77,255,.24); }
.oz-share-menu .oz-share-oz { color: #b388ff; font-weight: 600; }
.oz-share-sep { height: 1px; background: rgba(179,136,255,.18); margin: 4px 6px; }

/* the gag veil — the whiplash */
.oz-gag-veil {
  position: fixed; inset: 0; z-index: 10000; background: rgba(8,6,14,.82);
  display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(3px);
}
.oz-gag {
  max-width: 460px; background: #16121f; border: 1px solid rgba(179,136,255,.4); border-radius: 16px;
  padding: 24px 26px; box-shadow: 0 24px 80px rgba(0,0,0,.7); color: #e8e3ff;
}
.oz-gag-h { font: 800 19px/1.2 system-ui; letter-spacing: .01em; margin-bottom: 12px; color: #fff; }
.oz-gag-p { font: 14.5px/1.55 system-ui; margin: 0 0 12px; }
.oz-gag-fake { color: #ff9aa0; }
.oz-gag-real { color: #e8e3ff; }
.oz-gag-real b { color: #5fe09a; }
.oz-gag-kicker { color: #b0a8d8; font-size: 13.5px; }
.oz-gag-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.oz-gag-x {
  background: rgba(124,77,255,.22); color: #e8e3ff; border: 1px solid rgba(179,136,255,.45);
  border-radius: 9px; padding: 9px 18px; font: 700 var(--fs-ui) system-ui; cursor: pointer;
}
.oz-gag-x:hover { background: rgba(124,77,255,.36); }
.oz-gag-terms { background: transparent; border: 0; color: #9a90c4; font: 12.5px system-ui; cursor: pointer; text-decoration: underline; }
.oz-gag-terms:hover { color: #b388ff; }