.spot-diff-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  margin: 16px 0;
}

.spot-diff-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 300px;
  background: #2a1f4d url('../../assets/images/spot-difference/background.jpg') center/cover;
  border: 4px solid var(--color-accent);
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
}

.spot-diff-obj {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 34px;
  pointer-events: none;
}

.spot-diff-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid var(--color-good);
  pointer-events: none;
}

.spot-diff-hint {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px dashed var(--color-accent);
  pointer-events: none;
  animation: hint-pulse 0.6s ease infinite alternate;
}

@keyframes hint-pulse {
  from { opacity: 0.3; }
  to { opacity: 1; }
}