.alive-layer,
.alive-sparkles,
.alive-bursts {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
}

.alive-sparkle {
  position: fixed;
  width: 10px;
  height: 10px;
  pointer-events: none;
  color: var(--yellow, #fff200);
  text-shadow:
    1px 1px 0 #000,
    0 0 8px currentColor;
  transform: translate(-50%, -50%);
  animation: alive-sparkle-pop 720ms steps(5, end) forwards;
}

.alive-sparkle::before {
  content: "*";
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.alive-trail-dot {
  position: fixed;
  width: 7px;
  height: 7px;
  pointer-events: none;
  background: #00e7ff;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #00113b, 0 0 10px #ff1bbd;
  transform: translate(-50%, -50%);
  animation: alive-trail-fade 560ms ease-out forwards;
}

.alive-status-tray {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 85;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  align-items: center;
  width: min(342px, calc(100vw - 24px));
  min-height: 36px;
  padding: 5px 8px;
  color: #050505;
  background: #c9c9c9;
  border: 2px outset #fff;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.42);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.82rem;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.alive-status-tray.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.alive-status-light {
  width: 18px;
  height: 18px;
  background:
    radial-gradient(circle at 35% 35%, #fff 0 2px, transparent 3px),
    #75ff00;
  border: 2px inset #fff;
  box-shadow: 0 0 7px #75ff00;
}

.alive-status-text {
  min-width: 0;
}

.alive-modem {
  display: inline-block;
  min-width: 8ch;
  color: #001b7f;
  font-weight: 900;
}

.alive-burst {
  position: fixed;
  width: var(--alive-size, 108px);
  height: var(--alive-size, 108px);
  pointer-events: none;
  color: #050505;
  background: var(--alive-color, #fff200);
  clip-path: polygon(50% 0, 59% 24%, 85% 15%, 76% 41%, 100% 50%, 76% 59%, 85% 85%, 59% 76%, 50% 100%, 41% 76%, 15% 85%, 24% 59%, 0 50%, 24% 41%, 15% 15%, 41% 24%);
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 1000;
  text-align: center;
  text-transform: uppercase;
  filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.46));
  transform: translate(-50%, -50%) rotate(var(--alive-rotate, -8deg)) scale(0.2);
  animation: alive-burst-boom 820ms cubic-bezier(.2, .8, .1, 1) forwards;
}

.alive-confetti-bit {
  position: fixed;
  width: 8px;
  height: 12px;
  pointer-events: none;
  background: var(--alive-color, #ff1bbd);
  border: 1px solid rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: alive-confetti-fall var(--alive-time, 980ms) ease-out forwards;
}

.alive-draggable,
[data-alive-draggable],
.alive-sticker,
[data-alive-sticker],
.alive-window,
[data-alive-window] {
  touch-action: none;
}

.alive-draggable.is-alive-ready,
[data-alive-draggable].is-alive-ready,
.alive-sticker.is-alive-ready,
[data-alive-sticker].is-alive-ready,
.alive-window.is-alive-ready,
[data-alive-window].is-alive-ready {
  cursor: grab;
  user-select: none;
}

.alive-draggable.is-dragging,
[data-alive-draggable].is-dragging,
.alive-sticker.is-dragging,
[data-alive-sticker].is-dragging,
.alive-window.is-dragging,
[data-alive-window].is-dragging {
  cursor: grabbing;
  opacity: 0.96;
  filter: saturate(1.18) drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.38));
}

.alive-sticker,
[data-alive-sticker] {
  position: relative;
  transform: rotate(var(--alive-tilt, -2deg));
}

.alive-window,
[data-alive-window] {
  position: relative;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.42),
    6px 7px 0 rgba(0, 0, 0, 0.42);
}

.alive-window::before,
[data-alive-window]::before {
  content: attr(data-alive-title);
  display: block;
  min-height: 22px;
  margin: -1px -1px 6px;
  padding: 3px 7px;
  color: #fff;
  background: linear-gradient(90deg, #00117a, #1745c7 58%, #071058);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
}

[data-alive-drag-handle],
.alive-drag-handle {
  cursor: grab;
}

.alive-clickable {
  position: relative;
}

.alive-clickable:active {
  transform: translate(1px, 1px);
}

body.alive-reduced .alive-sparkle,
body.alive-reduced .alive-trail-dot,
body.alive-reduced .alive-burst,
body.alive-reduced .alive-confetti-bit,
body.motion-off .alive-sparkle,
body.motion-off .alive-trail-dot,
body.motion-off .alive-burst,
body.motion-off .alive-confetti-bit {
  animation: none;
  display: none;
}

body.alive-reduced .alive-status-tray,
body.motion-off .alive-status-tray {
  transition: none;
}

@keyframes alive-sparkle-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--alive-x, 0px)), calc(-50% + var(--alive-y, -22px))) scale(1.35) rotate(180deg);
  }
}

@keyframes alive-trail-fade {
  0% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }
}

@keyframes alive-burst-boom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--alive-rotate, -8deg)) scale(0.2);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--alive-rotate, -8deg)) scale(1.08);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--alive-rotate, -8deg)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--alive-rotate, -8deg)) scale(0.72);
  }
}

@keyframes alive-confetti-fall {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--alive-x, 0px)), calc(-50% + var(--alive-y, 160px))) rotate(var(--alive-r, 220deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .alive-sparkle,
  .alive-trail-dot,
  .alive-burst,
  .alive-confetti-bit {
    animation: none;
    display: none;
  }

  .alive-status-tray {
    transition: none;
  }
}

@media (max-width: 760px) {
  .alive-status-tray {
    right: 8px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    font-size: 0.76rem;
  }

  .alive-burst {
    width: min(var(--alive-size, 108px), 86px);
    height: min(var(--alive-size, 108px), 86px);
    font-size: 0.72rem;
  }

  .alive-confetti-bit {
    width: 7px;
    height: 10px;
  }
}