/* Blindclock: the cards of the home page, the demo round, the clock face, its pad and the reveal of a round. Prefixed
   classes, colours from the tokens of neurostim.css only. */
.bc-sub { font-size: var(--ns-size-lg, 1.125rem); font-weight: 400; }
.bc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ns-space-4, 1rem); margin: 0 0 var(--ns-space-5, 1.5rem); }
.bc-card { display: flex; flex-direction: column; gap: var(--ns-space-2, .5rem); }
.bc-card h2 { margin: 0; }
.bc-card p, .bc-card form { margin: 0; }
.bc-score { font-size: var(--ns-size-2xl, 1.75rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong, #2a2124); }
.bc-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5, 1.5rem); }
.bc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3, .75rem); margin: 0 0 var(--ns-space-4, 1rem); }
.bc-actions form { margin: 0; }
.bc > .bc-actions { justify-content: center; }
.bc-actions > a { display: inline-flex; align-items: center; min-height: var(--ns-target, 44px); }
.bc-rules { margin-top: var(--ns-space-6, 2rem); }

/* The clock face: big digits, blurred to « ?,?? » once hidden; its colour tells the gap after the stop. */
.bc-face { margin: 0 0 var(--ns-space-2, .5rem); font-family: var(--ns-font-mono, monospace); font-size: clamp(3.5rem, 18vw, 6rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ns-text-strong, #2a2124); transition: color .2s, filter .3s, opacity .3s; }
.bc-face-small { font-size: clamp(2.5rem, 12vw, 3.5rem); }
.bc-running { color: var(--ns-accent-dark, #cc0066); }
.bc-hidden .bc-digits, .bc-face.bc-hidden { filter: blur(6px); opacity: .45; animation: bc-hide .4s ease-out; }
@keyframes bc-hide { from { filter: blur(0); opacity: 1; } }
.bc-great { color: var(--ns-ok, #2e7d32); }
.bc-near, .bc-fair { color: var(--ns-warn, #9a5800); }
.bc-off { color: var(--ns-error, #c62828); }
.bc-face.bc-great, .bc-face.bc-near, .bc-face.bc-fair, .bc-face.bc-off { animation: bc-pop .35s ease-out; }
@keyframes bc-pop { 50% { transform: scale(1.08); } }

.bc-demo { width: min(100%, 22rem); margin: 0 auto var(--ns-space-5, 1.5rem); padding: var(--ns-space-3, .75rem); text-align: center; background: var(--ns-tint, #faf7f9); border: 2px solid var(--ns-border, #e6dfe3); border-radius: var(--ns-radius, 8px); }
.bc-demo p { margin: 0; }
.bc-demo.bc-near .bc-face { color: var(--ns-warn, #9a5800); }
.bc-demo-say { min-height: 1.5em; font-weight: 700; }

.bc-status { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ns-space-2, .5rem) var(--ns-space-5, 1.5rem); margin: 0 0 var(--ns-space-3, .75rem); font-variant-numeric: tabular-nums; }
.bc-status output { font-weight: 700; color: var(--ns-text-strong, #2a2124); }
.bc-game { width: min(100%, 28rem); margin: 0 auto var(--ns-space-4, 1rem); padding: var(--ns-space-4, 1rem) var(--ns-space-3, .75rem); text-align: center; background: var(--ns-tint, #faf7f9); border: 2px solid var(--ns-border-strong, #7f8c8b); border-radius: var(--ns-radius, 8px); box-sizing: border-box; }
.bc-dots { display: flex; justify-content: center; gap: var(--ns-space-2, .5rem); margin: 0 0 var(--ns-space-3, .75rem); padding: 0; list-style: none; }
.bc-dot { width: .9rem; height: .9rem; border-radius: 50%; background: var(--ns-border, #e6dfe3); border: 2px solid var(--ns-border-strong, #7f8c8b); }
.bc-dot.bc-on { background: var(--ns-ok, #2e7d32); border-color: var(--ns-ok, #2e7d32); }
.bc-dot.bc-on.bc-near, .bc-dot.bc-on.bc-fair { background: var(--ns-warn, #9a5800); border-color: var(--ns-warn, #9a5800); }
.bc-dot.bc-on.bc-off, .bc-dot.bc-miss { background: var(--ns-error, #c62828); border-color: var(--ns-error, #c62828); }
.bc-target { margin: 0 0 var(--ns-space-2, .5rem); font-size: var(--ns-size-xl, 1.25rem); }
.bc-target strong { color: var(--ns-accent-dark, #cc0066); font-variant-numeric: tabular-nums; }
.bc-gap { min-height: 1.4em; margin: 0; font-size: var(--ns-size-2xl, 1.75rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.bc-screen { min-height: 1.5em; margin: 0 0 var(--ns-space-3, .75rem); font-weight: 700; }
.bc-go { margin: 0; }
.bc-pad { width: min(100%, 20rem); min-height: 5rem; font-size: clamp(1.25rem, 6vw, 1.75rem); white-space: nowrap; border-radius: 2.5rem; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

.bc-result .bc-score .bc-sub { font-size: var(--ns-size-md, 1rem); }
.bc-table { width: 100%; max-width: 26rem; margin: 0 0 var(--ns-space-4, 1rem); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bc-table th, .bc-table td { padding: var(--ns-space-1, .25rem) var(--ns-space-2, .5rem); text-align: right; border-bottom: 1px solid var(--ns-border, #e6dfe3); }
.bc-table th:first-child, .bc-table td:first-child { text-align: left; }
.bc-table .bc-close td:last-child { color: var(--ns-ok, #2e7d32); font-weight: 700; }
.bc-table .bc-miss td:last-child { color: var(--ns-error, #c62828); }

@media (prefers-reduced-motion: reduce) { .bc-face, .bc-hidden .bc-digits { animation: none; transition: none; } }