/* Spanrun (refonte/DEV-rf-mini-b.md): the cards, the screen of the digits, the answer and its pad. Prefixed classes,
   colours from the tokens of neurostim.css only. */
.sp-sub { font-size: var(--ns-size-lg); font-weight: 400; }
.sp-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); }
.sp-card { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.sp-card h2 { margin: 0; }
.sp-card p, .sp-card form { margin: 0; }
.sp-span { font-size: var(--ns-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); }
.sp-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 var(--ns-space-5); }
.sp-rules { margin-top: var(--ns-space-6); }
.sp-result form { margin: var(--ns-space-3) 0 0; }

.sp-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; }
.sp-status output { font-weight: 700; font-size: var(--ns-size-xl); color: var(--ns-text-strong); }
.sp-game { width: min(100%, 22rem); margin: 0 auto var(--ns-space-4); text-align: center; }
.sp-screen { display: flex; align-items: center; justify-content: center; min-height: 7rem; margin: 0 0 var(--ns-space-3); padding: var(--ns-space-3); font-size: clamp(1.25rem, 6vw, 1.75rem); font-weight: 700; color: var(--ns-text-strong); background: var(--ns-tint); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }
.sp-screen.sp-on { font-size: 4.5rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ns-accent-darker); }
.sp-screen.sp-right { color: var(--ns-ok); background: var(--ns-ok-soft); border-color: var(--ns-ok-line); }
.sp-screen.sp-wrong { color: var(--ns-error); background: var(--ns-error-soft); border-color: var(--ns-error-line); }
.sp-typed { min-height: 2.5rem; margin: 0 0 var(--ns-space-3); font-family: var(--ns-font-mono); font-size: var(--ns-size-xl); letter-spacing: 0.2em; overflow-wrap: anywhere; }
.sp-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ns-space-2); margin: 0 0 var(--ns-space-3); touch-action: manipulation; }
.sp-pad button { min-height: calc(var(--ns-target) + 8px); margin: 0; padding: 0; font-size: var(--ns-size-xl); font-variant-numeric: tabular-nums; }
.sp-pad[hidden], .sp-typed[hidden] { display: none; }
.sp-actions { margin: 0; }