/* Missing Number. Shared game styles live in /play/play.css. */
.level { margin: 0 0 12px; color: var(--muted); font-size: 14px; text-align: center; }

.shapes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 2vw, 18px);
  padding: clamp(12px, 3vw, 24px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}
.shape { width: 100%; height: auto; overflow: visible; }
.shape.enter { animation: pop .25s ease-out backwards; }
.shape.enter:nth-child(2) { animation-delay: .06s; }
.shape.enter:nth-child(3) { animation-delay: .12s; }

.outline { fill: none; stroke: var(--line); stroke-width: 3; stroke-linejoin: round; }
.corner { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
.corner-num { fill: var(--ink); font: 600 15px var(--sans); text-anchor: middle; dominant-baseline: central; }
.centre-num { fill: var(--ink); font: 600 26px var(--serif); text-anchor: middle; dominant-baseline: central; }
.mystery .outline { stroke: var(--accent); stroke-dasharray: 6 5; }
.mystery .centre-num { fill: var(--accent); }
.mystery.solved .outline { stroke-dasharray: none; }

.answer-form { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.answer-form input {
  width: 7.5rem; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 22px/1 var(--serif); text-align: center; font-variant-numeric: tabular-nums;
}
.answer-form input:focus { border-color: var(--accent); outline: none; }
.answer-form .btn { min-height: 48px; }

.rule {
  display: inline-block; margin: 0 0 18px; padding: 8px 16px; border-radius: 999px;
  background: var(--accent-soft); color: var(--ink) !important; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .shape.enter { animation: none; }
}