.ao-stage { display: grid; place-items: center; padding: 22px 0 18px; overflow: hidden; }
.ao-grid {
  --n: 5;
  --cell: 48px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), var(--cell));
  grid-template-rows: repeat(var(--n), var(--cell));
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background-color: rgba(255, 255, 255, 0.035);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0 2px, transparent 2.5px);
  background-size: var(--cell) var(--cell);
  background-origin: content-box;
  background-clip: border-box;
}
.ao-block {
  appearance: none;
  -webkit-appearance: none;
  margin: 3px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--cell) * 0.24);
  background: var(--c);
  color: #0b1024;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition: filter 0.15s;
}
.ao-block:hover { filter: brightness(1.08); }
.ao-block:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ao-block svg { width: 58%; height: 58%; transform: rotate(var(--rot)); opacity: 0.85; }
.ao-block.hit { animation: ao-hit 0.45s ease; }
.ao-block.hint { animation: ao-pulse 0.75s ease-in-out 4; }
@keyframes ao-hit { 30% { box-shadow: 0 0 0 3px #f87171, 0 0 16px rgba(248, 113, 113, 0.8); filter: brightness(1.3); } }
@keyframes ao-pulse { 50% { box-shadow: 0 0 0 4px #fff, 0 0 22px rgba(255, 255, 255, 0.6); } }
.hearts { color: #f87171; letter-spacing: 1px; }
@media (prefers-reduced-motion: reduce) { .ao-block.hit, .ao-block.hint { animation: none; outline: 3px solid #fff; } }