/* Schulte Table (and Count Down, which reuses these classes): one line of rule in the open space,
   the square grid at the bottom within thumb reach. Thin lines, light numbers, found numbers fade. */

.cu-text { flex-direction: column; gap: 8px; text-align: center; }
.cu-head { margin: 0; font-size: 20px; font-weight: 300; }
.cu-sub { margin: 0; min-height: 1.45em; font-size: 13px; color: var(--stage-dim); }

/* Square, as wide as the body allows but no taller than the bottom ~45% of the screen; cells stay ≥ 44 px. */
.cu-wrap {
  position: relative;
  align-self: center;
  width: min(100%, max(calc(var(--n) * 46px), 45dvh));
  aspect-ratio: 1;
  container-type: inline-size;
}

.cu-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  width: 100%;
  height: 100%;
  border-top: 1px solid #3A3835;
  border-left: 1px solid #3A3835;
  font-size: 26px;
  font-size: calc(100cqw / var(--n) * var(--fk, 0.37));
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.cu-cell {
  border: none;
  border-right: 1px solid #3A3835;
  border-bottom: 1px solid #3A3835;
  background: transparent;
  color: var(--cu-ink, var(--stage-ink));
  font: inherit;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.cu-cell span { display: block; line-height: 1; transform: scale(var(--cu-s, 1)); font-weight: var(--cu-w, 300); }
.cu-cell.found { color: var(--stage-faint); }
.cu-cell:focus { outline: none; }
.cu-cell:focus-visible { outline: 1px solid var(--stage-dim); outline-offset: -4px; }

/* right: a small pop; wrong: a 2 px shake and a dim, never red */
.cu-cell.hit span { animation: cu-pop 0.12s ease-out; }
.cu-cell.miss span { animation: cu-miss 0.15s ease-out; }
@keyframes cu-pop { 50% { scale: 1.06; } }
@keyframes cu-miss { 25% { translate: -2px 0; opacity: 0.45; } 75% { translate: 2px 0; opacity: 0.6; } }

/* the first-time ghost finger */
.cu-ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: rgba(238, 235, 229, 0.14);
  border: 1px solid rgba(238, 235, 229, 0.5);
  opacity: 0;
  pointer-events: none;
  transition-property: transform, opacity;
  transition-duration: 0.6s, 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1), ease;
}

/* The fixed tests' start (check-in, today's board): an empty grid with 3 · 2 · 1 over it; the numbers and the clock
   come together after it. */
.cu-cell.cu-blank { pointer-events: none; }
.cu-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--stage-ink);
  font-size: 30cqw;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cu-count.tick { animation: cu-count 0.65s ease-out; }
@keyframes cu-count { from { opacity: 0; scale: 1.08; } 20% { opacity: 1; scale: 1; } to { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .cu-count.tick { animation: none; } }