.watch-stage {
  background: #1f3d2c;
}

.watch-plate {
  position: absolute;
  inset: 0 0 132px;
}

.watch-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-plate [data-hotspots] {
  position: absolute;
  inset: 0;
}

.watch-hot {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 92px;
  min-height: 48px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 243, 204, 0.7);
  border-radius: 999px;
  background: rgba(19, 11, 35, 0.55);
  color: #fffaf1;
  font-weight: 800;
  cursor: pointer;
  z-index: 2;
}

.watch-hot.pulse {
  box-shadow: 0 0 0 6px rgba(124, 232, 255, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  50% { box-shadow: 0 0 0 12px rgba(124, 232, 255, 0.05); }
}

.watch-swill {
  position: absolute;
  right: 8px;
  bottom: 140px;
  width: min(28%, 180px);
  height: min(38%, 220px);
  pointer-events: none;
}

.watch-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px 16px;
  background: linear-gradient(180deg, transparent, rgba(12, 7, 28, 0.86));
  z-index: 3;
}

.watch-dock p { margin: 6px 0; }

.watch-goal {
  margin: 0;
  color: #fff3cc;
  font-weight: 800;
}

.watch-hot.seen {
  border-color: rgba(255, 202, 66, 0.7);
  background: rgba(255, 202, 66, 0.12);
}

.watch-hot.ready-pulse {
  box-shadow: 0 0 0 8px rgba(255, 202, 66, 0.28);
}

.btn-understood {
  min-width: min(100%, 220px);
  animation: understood-pop 0.9s ease-in-out infinite;
}

@keyframes understood-pop {
  50% { transform: scale(1.04); box-shadow: 0 16px 32px rgba(255, 202, 66, 0.4); }
}