/* Sequence — one thing at a time in a thin frame up top; then a row of slots, and the choices + Undo in the
   bottom ~45% of the screen (thumb reach). Wrong = dim + a 2 px shake, never red. */

.sq [hidden] { display: none !important; }

.sq-stim { flex-direction: column; gap: 18px; min-height: 0; }
.sq-meta { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--stage-dim); text-align: center; }

/* show phase */
.sq-show { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sq-big {
  width: 136px; height: 136px; border: 1px solid var(--stage-line); border-radius: 30px;
  display: flex; align-items: center; justify-content: center; color: var(--stage-ink);
}
.sq-big svg { display: block; }
.sq-dots { display: flex; gap: 10px; min-height: 8px; }
.sq-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--stage-faint); box-sizing: border-box; }
.sq-dots i.on { background: var(--stage-ink); border-color: var(--stage-ink); }

/* recall: the slots */
.sq-recall { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sq-slots {
  --n: 6;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 46px));
  justify-content: center;
  gap: 6px;
}
.sq-slots[data-n='3'], .sq-slots[data-n='4'] { grid-template-columns: repeat(var(--n), 54px); gap: 10px; }
.sq-slot {
  aspect-ratio: 1; border: 1px solid #3A3835; border-radius: 12px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; color: var(--stage-ink);
}
.sq-slot svg { display: block; width: 60%; height: 60%; }
.sq-slot.is-next { border-color: var(--stage-dim); }
.sq-slot.is-filled { background: var(--stage-2); }
/* never color alone: a right slot gets a heavier outline, a wrong one dims and shakes */
.sq-slot.is-right { border: 1.5px solid var(--ok); color: var(--ok); }
.sq-slot.is-wrong { opacity: 0.4; }
.sq-key { margin: 8px 0 0; font-size: 13px; color: var(--stage-dim); }
.sq-keyrow .sq-slot { color: var(--stage-ink); }
.sq-keyrow .sq-slot.is-fix { border: 1.5px dashed var(--stage-ink); }

/* recall: the choices and Undo */
.sq-controls { align-items: center; }
.sq-answer { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sq-choices {
  --cols: 4;
  --gap: 8px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.sq-choice {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  height: 62px; padding: 0; border-radius: 16px; 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;
}
.sq-choice svg { display: block; pointer-events: none; }
.sq-choice:active { background: #1E1D1B; }
.sq-choice:disabled { opacity: 0.25; cursor: default; }
.sq-choices.is-over .sq-choice { opacity: 0.25; }
.sq-choice.guide, .sq-undo.guide { outline: 1px dashed var(--stage-dim); outline-offset: -6px; }

.sq-undo {
  height: 44px; min-width: 112px; padding: 0 22px; border-radius: 22px; border: 1px solid var(--stage-line);
  background: transparent; color: var(--stage-dim); font-size: 15px; touch-action: manipulation;
}
.sq-undo:active { background: #1E1D1B; }
.sq-undo:disabled { opacity: 0.35; cursor: default; }