.hh-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.hh-scene-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.hh-scene-btn {
  position: relative;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hh-scene-btn[aria-pressed="true"] {
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 2px var(--color-primary-dark);
}
.hh-scene-btn__check {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 0.75rem;
  background: var(--color-success);
  color: #fff;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hh-stage {
  position: relative;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 700 / 420;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--color-border);
  cursor: crosshair;
}

.hh-decor {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  filter: saturate(0.85);
}

.hh-item {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--hh-rot, 0deg));
  border: none;
  background: transparent;
  padding: 10px;
  margin: -10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.62;
  transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}
.hh-item:hover { opacity: 0.85; }
.hh-item:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 50%;
}
.hh-item--found {
  opacity: 1;
  cursor: default;
  animation: hh-pop 0.4s ease;
}
.hh-item--hint {
  animation: hh-hint-pulse 1s ease-in-out infinite;
}

@keyframes hh-pop {
  0% { transform: translate(-50%, -50%) rotate(var(--hh-rot, 0deg)) scale(1); }
  45% { transform: translate(-50%, -50%) rotate(var(--hh-rot, 0deg)) scale(1.5); }
  100% { transform: translate(-50%, -50%) rotate(var(--hh-rot, 0deg)) scale(1); }
}
@keyframes hh-hint-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px #fff700) drop-shadow(0 0 6px #ffb100); }
  50% { filter: drop-shadow(0 0 8px #fff700) drop-shadow(0 0 14px #ffb100); }
}

.hh-found-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  font-size: 0.7rem;
}

.hh-miss-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: 1.2rem;
  opacity: 0.85;
  animation: hh-miss-fade 0.7s ease forwards;
}
@keyframes hh-miss-fade {
  0% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.6); }
  60% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1.1); }
}

.hh-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-width: 700px;
}
.hh-check-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-soft);
  background: var(--color-surface);
}
.hh-check-chip__icon { font-size: 1rem; }
.hh-check-chip--found {
  color: var(--color-success);
  border-color: var(--color-success);
  background: #eafaf0;
}

.hh-hint-row { display: flex; justify-content: center; }

@media (max-width: 480px) {
  .hh-item { padding: 8px; margin: -8px; }
  .hh-check-chip { font-size: 0.78rem; padding: 5px 10px; }
}