/* missing — a grid of line icons up top, eight options in the bottom of the screen.
   Sizes follow the screen height (clamp + dvh), so a 16-icon grid and both option rows fit an iPhone SE
   and a 360 × 600 phone; at full size they are 64 / 74 px cells and 76 px options. */
.ms-stim { flex-direction: column; gap: clamp(12px, 3dvh, 22px); }
.ms-grid {
  --cell: clamp(40px, 7.6dvh, 64px); --gap: clamp(6px, 1.4dvh, 10px);
  display: grid; grid-template-columns: repeat(var(--cols, 4), var(--cell)); gap: var(--gap); justify-content: center;
}
.ms-grid[data-cols='3'] { --cell: clamp(46px, 9dvh, 74px); }
.ms-cell {
  width: var(--cell); height: var(--cell); border: 1px solid var(--stage-line); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; color: var(--stage-ink);
  transition: background-color 0.18s ease;
}
.ms-cell svg { display: block; max-width: 70%; max-height: 70%; }
.ms-cell.is-hole { border-style: dashed; border-color: var(--stage-faint); }
.ms-cell.is-hole svg { opacity: 0.35; }
.ms-grid.is-covered .ms-cell { background: var(--stage-2); border-color: var(--stage-line); }
.ms-grid.is-covered .ms-cell svg { visibility: hidden; }

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

/* a fixed share of the screen in both phases (Ready, then the options), so the grid above never jumps */
.ms-controls { flex: none; min-height: 0; gap: 12px; align-items: stretch; height: min(230px, 28vh); height: clamp(150px, 28dvh, 230px); }
.ms-ready { align-self: center; margin-bottom: 8px; }
.ms-label { min-height: 1.3em; font-size: 13px; color: var(--stage-dim); text-align: center; }
.ms-options {
  flex: 0 1 auto; min-height: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(48px, 76px));
}
.ms-opt {
  height: auto; min-height: 48px; padding: 0; border-radius: 18px; border: 1px solid var(--stage-line); background: var(--stage-2);
  color: var(--stage-ink); display: flex; align-items: center; justify-content: center;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.ms-opt svg { display: block; pointer-events: none; }
.ms-opt:active { background: #1E1D1B; }
.ms-opt.is-picked { border-color: var(--stage-ink); background: #1E1D1B; }
.ms-opt:disabled { cursor: default; }
/* the reveal never relies on color alone: found = a solid outline, missed = a dashed one, a wrong pick = dimmed */
.ms-options.is-revealed .ms-opt { opacity: 0.28; }
.ms-options.is-revealed .ms-opt.is-found { opacity: 1; border: 1.6px solid var(--ok); color: var(--ok); }
.ms-options.is-revealed .ms-opt.is-missed { opacity: 1; border: 1.6px dashed var(--stage-ink); }
.ms-options.is-revealed .ms-opt.is-wrong { opacity: 0.45; }