#campaign-inventory-btn,
#debug-toggle-btn,
#save-hotspots-btn,
#debug-save-btn {
  position: fixed;
  z-index: 1000;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.68);
  color: rgba(255, 255, 255, 0.94);
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#debug-toggle-btn {
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
}

#campaign-inventory-btn {
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(64px + env(safe-area-inset-bottom));
}

#save-hotspots-btn,
#debug-save-btn {
  right: calc(64px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: none;
}

body.debug #save-hotspots-btn,
body.debug #debug-save-btn {
  display: block;
}

#campaign-inventory-btn:focus-visible,
#debug-toggle-btn:focus-visible,
#save-hotspots-btn:focus-visible,
#debug-save-btn:focus-visible {
  outline: 2px solid rgba(65, 229, 255, 0.95);
  outline-offset: 2px;
}

body.debug #debug-object-controls {
  bottom: calc(116px + env(safe-area-inset-bottom));
}

body:not(.debug) #save-hotspots-btn + .sync-badge {
  display: none;
}

[data-campaign-debug-object] {
  touch-action: manipulation;
}

body.debug [data-campaign-debug-object] {
  cursor: move;
  outline: 2px dashed rgba(65, 229, 255, 0.95);
  outline-offset: -2px;
  touch-action: none;
}

.campaign-debug-resize-handle {
  position: absolute;
  z-index: 2;
  display: none;
  width: 14px;
  height: 14px;
  border: 1px solid #041016;
  border-radius: 50%;
  background: #41e5ff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82);
}

body.debug .campaign-debug-resize-handle {
  display: block;
}

.campaign-debug-resize-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.campaign-debug-resize-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.campaign-debug-resize-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.campaign-debug-resize-se { right: -7px; bottom: -7px; cursor: nwse-resize; }

.campaign-smoke-puff {
  position: absolute;
  z-index: 990;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.campaign-cigarette-ember {
  position: absolute;
  left: -13px;
  top: -7px;
  width: 26px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 42%, rgba(255, 250, 220, 0.98) 0 7%, transparent 9%),
    radial-gradient(ellipse at 58% 55%, #ffd47a 0 12%, #ff8b34 30%, #d8381d 52%, #681811 68%, #27201e 78%, transparent 82%);
  box-shadow:
    inset -3px -2px 4px rgba(28, 16, 14, 0.82),
    inset 2px 1px 3px rgba(255, 211, 121, 0.48),
    0 0 10px rgba(255, 79, 27, 0.92),
    0 0 28px rgba(255, 129, 44, 0.58);
  opacity: 0;
  animation: campaign-ember-inhale 2.6s cubic-bezier(0.3, 0.02, 0.32, 1) forwards;
}

.campaign-cigarette-ember::after {
  content: '';
  position: absolute;
  inset: 2px 3px;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(48, 24, 20, 0.72) 36% 42%, transparent 44% 100%),
    linear-gradient(24deg, transparent 0 56%, rgba(255, 183, 83, 0.5) 58% 62%, transparent 64% 100%);
  mix-blend-mode: multiply;
}

.campaign-smoke-wisp {
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  height: 190px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(239, 243, 244, 0.44), rgba(207, 217, 221, 0.22) 44%, rgba(184, 194, 198, 0) 76%);
  filter: blur(9px);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: campaign-smoke-drift var(--campaign-smoke-duration) ease-out var(--campaign-smoke-delay) 1 forwards;
}

@keyframes campaign-ember-inhale {
  0% { opacity: 0.16; transform: scale(0.62); filter: saturate(0.72) brightness(0.72); }
  24% { opacity: 0.48; transform: scale(0.78); filter: saturate(0.92) brightness(0.9); }
  76% { opacity: 1; transform: scale(1.22); filter: saturate(1.55) brightness(1.28); }
  90% { opacity: 0.94; transform: scale(1.3); filter: saturate(1.72) brightness(1.4); }
  100% { opacity: 0; transform: scale(0.78); filter: saturate(0.7) brightness(0.56); }
}

@keyframes campaign-smoke-drift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.22) rotate(0deg); }
  12% { opacity: 0.52; transform: translate3d(0, -18px, 0) scale(var(--campaign-smoke-scale-small)) rotate(4deg); }
  58% { opacity: 0.34; transform: translate3d(var(--campaign-smoke-x), -190px, 0) scale(var(--campaign-smoke-scale)) rotate(16deg); }
  100% { opacity: 0; transform: translate3d(var(--campaign-smoke-x-far), -360px, 0) scale(var(--campaign-smoke-scale-far)) rotate(-12deg); }
}

.campaign-smoking-emote {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 10020;
  display: grid;
  gap: 4px;
  width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid rgba(150, 222, 255, 0.72);
  border-radius: 4px;
  background: rgba(5, 12, 18, 0.94);
  color: #f3f7f8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.48);
  pointer-events: none;
  transform: translateX(-50%);
  animation: campaign-smoking-emote 5.2s ease forwards;
}

.campaign-smoking-emote span { color: #bed0d6; font-size: 0.88rem; }

@keyframes campaign-smoking-emote {
  0%, 8% { opacity: 0; transform: translate(-50%, 10px); }
  16%, 82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-cigarette-ember { animation-duration: 240ms; }
  .campaign-smoke-wisp { animation-duration: 1.2s; }
}

/*
CRUMBFORGE CHANGE LOG
Modified: 2026-07-14T00:20:00.000Z
Summary: Style shared Campaign room hotspot editing while retaining the close-POV inhale and smoke presentation.

Modified: 2026-07-14T23:50:00.000Z
Summary: Center and shade the P-Funk ember, delay a broader detached exhale, and style the five-minute ashtray emote.
*/