.reach { display: grid; gap: 14px; user-select: none; -webkit-user-select: none; }

.target {
  padding: 12px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.target-label { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.target-value { display: block; font-size: 3.2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.num {
  aspect-ratio: 1.5;
  border: 2px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  font-size: 1.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.1s ease, background-color 0.15s ease;
}
.num:active:not(:disabled) { scale: 0.95; }
.num:focus-visible, .op:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.num[aria-pressed="true"] { border-color: var(--a); background: color-mix(in srgb, var(--a) 22%, var(--surface)); }
.num.gone { visibility: hidden; }
.num.hit { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.num.fresh { animation: bump 0.3s ease; }
.reach.solved .num.hit { animation: bump 0.5s ease 2; }

/* Gentler than the shared pop: these tiles are big and sit close together. */
@keyframes bump { 50% { scale: 1.08; } }

.ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.op {
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.op[aria-pressed="true"] { border-color: var(--b); background: color-mix(in srgb, var(--b) 24%, var(--surface)); }

.steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 30px; margin: 0; padding: 0; list-style: none; }
.steps li { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }