/* Bigger — numbers printed at clearly different sizes in a thin-line square field. The numbers are both the
   stimulus and the control, so the field sits in the bottom ~45% of the screen; the time, the count and the
   right order show in the open space above. */

.bg-stim { min-height: 0; }
.bg-status { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 8px; }
.bg-big {
  min-height: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  font-size: 44px; font-weight: 200; letter-spacing: -0.5px; line-height: 50px; color: var(--stage-ink);
}
.bg-big.order { font-size: 24px; font-weight: 300; letter-spacing: 0.5px; }
.bg-big.order i { font-style: normal; color: var(--stage-faint); }
.bg-big.order .took { color: var(--stage-dim); }
.bg-meta { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--stage-dim); }

.bg-controls { align-items: center; }
.bg-board { width: min(100%, 44dvh, 370px); display: flex; flex-direction: column; gap: 14px; }

.bg-clock { height: 1px; background: var(--stage-line); overflow: hidden; }
.bg-clock i { display: block; height: 100%; background: var(--stage-dim); transform-origin: left center; }
.bg-clock.off { visibility: hidden; }

.bg-frame { position: relative; aspect-ratio: 1; border: 1px solid var(--stage-line); border-radius: 20px; }
.bg-field {
  position: absolute;
  inset: 12px;
  container-type: size;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* a whole cell is one number's tap target; it draws nothing itself */
.bg-cell {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--stage-ink);
  font: inherit;
  touch-action: manipulation;
}
.bg-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(var(--s) * 100cqw);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* a thin ring around a number: the worked example (solid), the practice nudge (dashed), "this came next" */
.bg-num::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: max(42px, calc(100% + 14px), calc(1em + 8px)); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid transparent; pointer-events: none;
}
.bg-cell.demo .bg-num::after { border-color: var(--stage-ink); }
.bg-cell.guide .bg-num::after { border: 1px dashed var(--stage-dim); }
.bg-cell.next .bg-num::after { border-color: var(--stage-dim); }

/* tapped in order */
.bg-cell.done .bg-num { color: var(--stage-faint); }
/* a wrong tap: dim (the shake comes from .shake) */
.bg-cell.wrong .bg-num { opacity: 0.4; }

/* after the look: the numbers vanish, their targets stay where they were */
.bg-field.gone .bg-cell:not(.done) .bg-num { opacity: 0; }