/* Gridrush (refonte/DEV-rf-mini-b.md): the size tabs, the cards, the grid of numbers to tap in order. Prefixed classes,
   colours from the tokens of neurostim.css only. */
.gr-sub { font-size: var(--ns-size-lg); font-weight: 400; }
.gr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--ns-space-4); margin: 0 0 var(--ns-space-5); }
.gr-card { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.gr-card h2 { margin: 0; }
.gr-card p, .gr-card form { margin: 0; }
.gr-time { font-size: var(--ns-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); }
.gr-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 var(--ns-space-5); }
.gr-rules { margin-top: var(--ns-space-6); }
.gr-result form { margin: var(--ns-space-3) 0 0; }

.gr-status { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ns-space-2) var(--ns-space-5); margin: 0 0 var(--ns-space-3); font-variant-numeric: tabular-nums; }
.gr-status output { font-weight: 700; font-size: var(--ns-size-xl); color: var(--ns-text-strong); }
.gr-status .gr-next { color: var(--ns-accent-darker); }
.gr-grid { display: grid; gap: 4px; width: min(100%, 30rem); margin: 0 auto var(--ns-space-4); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.gr-size-4 { grid-template-columns: repeat(4, 1fr); }
.gr-size-5 { grid-template-columns: repeat(5, 1fr); }
.gr-size-6 { grid-template-columns: repeat(6, 1fr); }
.gr-grid .gr-cell { display: flex; align-items: center; justify-content: center; min-width: var(--ns-target); min-height: var(--ns-target); aspect-ratio: 1; margin: 0; padding: 0; font-size: clamp(1.1rem, 5vw, 1.75rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-ink); background: var(--ns-page); border: 1px solid var(--ns-border-strong); border-radius: var(--ns-radius-sm); -webkit-tap-highlight-color: transparent; }
.gr-grid .gr-cell:focus-visible { outline: 3px solid var(--ns-focus); outline-offset: 1px; }
.gr-grid .gr-ok { animation: gr-ok 0.25s ease-out; }
.gr-grid .gr-bad { animation: gr-bad 0.35s ease-out; }
.gr-done .gr-grid { opacity: 0.6; }
@keyframes gr-ok { from { color: var(--ns-on-accent); background: var(--ns-accent-dark); } }
@keyframes gr-bad { from { color: var(--ns-error); background: var(--ns-error-soft); border-color: var(--ns-error); } }
@media (prefers-reduced-motion: reduce) { .gr-grid .gr-ok, .gr-grid .gr-bad { animation-duration: 0.01s; } }