.nn-board {
  min-height: 420px;
  height: 60vh;
  max-height: 600px;
  position: relative;
}
.nn-bubble {
  position: absolute;
  width: clamp(56px, 14vw, 84px);
  height: clamp(56px, 14vw, 84px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff 0%, var(--accent-2) 60%, #3aa2d8 100%);
  color: var(--slate-900);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 -6px 10px rgba(0,0,0,.15);
  transition: transform .08s ease;
  touch-action: manipulation;
}
.nn-bubble:active { transform: scale(.94); }
.nn-bubble.is-bad { animation: nn-shake .25s ease; background: radial-gradient(circle at 30% 25%, #fff 0%, var(--accent-3) 60%, #c56477 100%); }
.nn-bubble.is-good { animation: nn-pop .3s ease forwards; background: radial-gradient(circle at 30% 25%, #fff 0%, var(--accent-4) 60%, #4ba04b 100%); }
@keyframes nn-shake { 0%,100%{transform:translate(0,0);} 25%{transform:translate(-4px,0);} 75%{transform:translate(4px,0);} }
@keyframes nn-pop   { from{transform:scale(1);opacity:1;} to{transform:scale(1.6);opacity:0;} }

.nn-controls {
  display: flex;
  gap: .75rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}