.dot{
  position: fixed;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(128,128,128);
  pointer-events: none;
  will-change: transform, opacity, box-shadow;
  z-index: 9999;
}
.dot.sulk { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); }
.dot.soothed{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 0 10px rgba(255,255,255,0.06);
}
.dot.meltdown{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 18px rgba(255,255,255,0.05);
}
.dot.fatigued{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55);
  opacity: 0.90;
}
@media (pointer: coarse), (hover: none) {
  .dot {
    display: none !important;
  }
}