:root {
  --rot-color-primary: #5d6e41;
  /* Mossy green */
  --rot-color-secondary: #3b452a;
  /* Darker decay */
  --rot-color-mold: #8c9c70;
  /* Pale mold */
  --rot-preview-bg: rgba(61, 58, 52, 0.92);
  --rot-preview-text: #f4f1ea;
  --rot-preview-border: rgba(141, 156, 112, 0.5);
}

.rot-preview-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 0.55rem 0.85rem;
  font-family: system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--rot-preview-text);
  background: var(--rot-preview-bg);
  border: 1px solid var(--rot-preview-border);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.rot-preview-banner__exit {
  margin-left: auto;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--rot-preview-text);
  background: transparent;
  border: 1px solid var(--rot-preview-border);
  border-radius: 4px;
}

.rot-preview-banner__exit:hover {
  background: rgba(255, 255, 255, 0.08);
}

.rot-preview-banner__hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.88;
  color: var(--rot-preview-text);
}

/* Base class for rottable elements */
.rottable {
  position: relative;
  /* Ensure filter can be applied */
  will-change: filter;
}

/* Rot Stages - Visuals handled by JS/SVG now, but we keep some base styles */
.rot-stage-1 {
  /* Slight desaturation handled by SVG or class */
}

.rot-stage-2 {
  /* Bubbling handled by SVG */
}

.rot-stage-3 {
  /* Heavy distortion handled by SVG */
}

/* Spore Particles */
.rot-spore {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--rot-color-mold);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
}

/* Cleaning Animation */
.cleaning {
  /* Shake effect handled by GSAP or kept here as fallback */
  animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}