/* Numbers Round only: the target, the six numbers, the signs and the steps. Shared rules are in ../shared/base.css. */
.target { font-size: clamp(52px, 16vw, 84px); font-weight: 800; line-height: 1; margin: 4px 0 0; color: var(--accent); letter-spacing: -0.02em; }
.tiles-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.tiles-n button {
  min-height: 58px; border-radius: 12px; border: 2px solid var(--text); background: var(--raised); color: var(--text);
  font: inherit; font-size: 26px; font-weight: 800; cursor: pointer;
}
.tiles-n button.picked { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.tiles-n button.made { border-style: dashed; }
.tiles-n button:disabled { visibility: hidden; }
.ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.ops .op { font-size: 28px; font-weight: 800; min-height: 52px; padding: 0; }
.ops .op.picked { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.steps { list-style: none; padding: 0; margin: 10px 0 0; color: var(--muted); font-weight: 600; min-height: 1.5em; }
.steps li { display: inline; }
.steps li + li::before { content: " · "; }
.hint-out { min-height: 1.4em; margin: 6px 0; color: var(--accent); font-weight: 600; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.verdict .why { color: var(--muted); }
@media (max-height: 600px) { .tiles-n button { min-height: 48px; font-size: 22px; } .ops .op { min-height: 46px; } .target { font-size: 48px; } }