/* Twin — a thin-line grid of two-digit numbers (the Schulte Table look), with a 1 px clock line above it.
   The grid sits in the bottom ~45% of the screen; the find time shows in the open space above.
   Grids are rows × columns (3×4 … 7×7), never taller than wide, so a rectangle takes less of the screen. */

.tw-stim { min-height: 0; }
.tw-status { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tw-big { margin: 0; min-height: 50px; font-size: 44px; font-weight: 200; letter-spacing: -0.5px; line-height: 50px; color: var(--stage-ink); }
.tw-meta { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--stage-dim); }

.tw-controls { align-items: center; }
.tw-board {
  --rows: 6;
  --cols: 6;
  --fs: 23px;
  /* never narrower than 46 px per cell (touch targets), never taller than ~41% of the screen when there is room */
  width: min(100%, max(calc(var(--cols) * 46px), calc(41dvh * var(--cols) / var(--rows))), 360px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.tw-grid {
  aspect-ratio: var(--cols) / var(--rows);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  border-top: 1px solid #3A3835;
  border-left: 1px solid #3A3835;
  font-size: var(--fs);
  font-weight: 300;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.tw-cell {
  padding: 0;
  border: none;
  border-right: 1px solid #3A3835;
  border-bottom: 1px solid #3A3835;
  background: transparent;
  color: var(--stage-ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  touch-action: manipulation;
}
.tw-cell:active { background: #1A1918; }

.tw-cell.wrong { color: var(--stage-faint); }
.tw-cell.hint { box-shadow: inset 0 0 0 1px var(--stage-dim); }

/* the board is over: everything else steps back, the two copies stand out */
.tw-grid.over .tw-cell { color: var(--stage-faint); }
.tw-grid.over .tw-cell.found { background: var(--stage-ink); color: var(--stage); }
.tw-grid.over .tw-cell.shown { color: var(--stage-ink); box-shadow: inset 0 0 0 1.5px var(--stage-ink); }