/* Target Number. Shared game styles live in /play/play.css. */
.board {
  display: grid; justify-items: center; padding: clamp(18px, 4vw, 30px) clamp(12px, 3vw, 24px);
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}
.target-label { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.target { margin: 0 0 22px; color: var(--accent); font: 600 clamp(56px, 14vw, 80px)/1 var(--serif); font-variant-numeric: tabular-nums; }

.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.5vw, 14px); min-height: 72px; }
.tile {
  display: grid; place-items: center; min-width: 68px; height: 68px; padding: 0 10px;
  border: 1.5px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink);
  box-shadow: 0 3px 0 var(--line);
  font: 600 28px/1 var(--serif); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: transform .1s, background-color .1s;
}
.tile:hover:not(:disabled) { transform: translateY(-2px); }
.tile.selected { border-color: var(--accent); background: var(--accent); color: var(--bg); box-shadow: 0 3px 0 var(--accent-soft); }
.tile.win { border-color: var(--accent); background: var(--accent); color: var(--bg); opacity: 1; cursor: default; }
.tile:disabled { cursor: default; }
.tile.enter { animation: pop .22s ease-out backwards; }
.tile.enter:nth-child(2) { animation-delay: .04s; }
.tile.enter:nth-child(3) { animation-delay: .08s; }
.tile.enter:nth-child(4) { animation-delay: .12s; }
.tile.enter:nth-child(5) { animation-delay: .16s; }
.tile.pop { animation: pop .2s ease-out; }

.steps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px;
  margin: 20px 0 0; padding: 0; list-style: none;
}
.steps li {
  padding: 3px 12px; border-radius: 999px; background: var(--accent-soft);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.solution { flex-direction: column; align-items: center; margin: 0 0 20px; }
.solution li { font-size: 16px; padding: 5px 16px; }

.ops { display: flex; justify-content: center; gap: 12px; margin: 4px 0 16px; }
.ops button {
  width: 58px; height: 58px; border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink); font: 500 28px/1 var(--sans); cursor: pointer;
  transition: transform .1s;
}
.ops button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--muted); }
.ops button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.ops button:disabled { opacity: .4; cursor: default; }

@media (max-width: 380px) {
  .tile { min-width: 58px; height: 58px; font-size: 24px; }
  .ops button { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile.enter, .tile.pop { animation: none; }
  .tile, .ops button { transition: none; }
}