/* Do you remember? */

.rm-best { font: 600 1rem/1 var(--font-display); color: var(--muted); }

.rm-stage {
  max-width: 640px;
  margin: 0 auto;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 8px;
}
.rm-stage > * { max-width: 100%; }
.rm-screen { width: 100%; display: flex; flex-direction: column; align-items: center; animation: rm-in .3s ease both; }
@keyframes rm-in { from { opacity: 0; transform: translateY(10px); } }

.rm-kicker {
  font: 600 .92rem/1.2 var(--font-display);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 10px 0 6px;
}
.rm-title { font: 700 clamp(1.9rem, 6vw, 2.6rem)/1.1 var(--font-display); margin: 0 0 18px; }
.rm-sub { color: var(--muted); font-size: 1.1rem; font-weight: 600; margin: -6px 0 22px; }

/* ---------- intro */
.rm-hero { font-size: 4.6rem; line-height: 1; margin: 18px 0 4px; animation: bob 2.4s ease-in-out infinite; }
.rm-steps {
  list-style: none;
  counter-reset: s;
  padding: 0;
  margin: 4px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.rm-steps li { counter-increment: s; display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 1.1rem; text-align: left; }
.rm-steps li::before {
  content: counter(s);
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font: 700 1rem/1 var(--font-display);
}

/* ---------- the number */
/* fitDigits() in remember.js sets --w (box size) and --per (boxes per row) */
.rm-number {
  --w: 64px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: calc(var(--per, 99) * (var(--w) + 8px) - 8px);
  margin: 8px 0 32px;
}
.rm-number span {
  display: grid;
  place-items: center;
  width: var(--w);
  height: calc(var(--w) * 1.3);
  font: 700 calc(var(--w) * .72)/1 var(--font-display);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: calc(var(--w) * .22);
  box-shadow: 0 calc(var(--w) * .08) 0 var(--ink);
  animation: pop .35s cubic-bezier(.3, 1.5, .5, 1) both;
}

/* ---------- distraction tasks */
.rm-top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.rm-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rm-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); transition: background .2s; }
.rm-dots i.done { background: var(--ink); }
.rm-dots i.now { background: var(--accent); box-shadow: 0 0 0 2px var(--ink); }

.rm-task { width: 100%; padding: 26px 22px 22px; }
.rm-label { font: 600 1rem/1.2 var(--font-display); color: var(--muted); margin: 0 0 12px; }
.rm-q { font: 700 1.3rem/1.4 var(--font-display); margin: 0 0 20px; }
.rm-q.big { font-size: clamp(2.4rem, 10vw, 3.4rem); line-height: 1.1; letter-spacing: .01em; }
.rm-q.mid { font-size: clamp(1.6rem, 7vw, 2.3rem); line-height: 1.2; }
.rm-round { color: var(--muted); font-weight: 800; margin: -4px 0 10px; font-size: .92rem; }

.rm-answer-form, .rm-recall-form { display: flex; gap: 10px; justify-content: center; width: 100%; max-width: 440px; margin: 0 auto; }
.rm-answer-form .input, .rm-recall-form .input { flex: 1; min-width: 0; }
.rm-answer { text-align: center; font-family: var(--font-display); font-weight: 600; }
.rm-recall { text-align: center; font: 600 2rem/1.2 var(--font-display); letter-spacing: .18em; }
.rm-recall::placeholder { letter-spacing: .3em; color: #d6cfbf; }

.rm-feedback { min-height: 1.6em; margin-top: 16px; font: 600 1.15rem/1.35 var(--font-display); }
.rm-feedback.ok { color: var(--good); }
.rm-feedback.bad { color: var(--bad); }
.rm-feedback b { color: var(--ink); }

.rm-choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rm-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 64px;
  padding: 14px 20px;
  font: 600 1.15rem/1 var(--font-display);
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, background .15s;
}
.rm-choice:hover { background: var(--soft); }
.rm-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.rm-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.rm-choice:disabled { cursor: default; }
.rm-choice:disabled:not(.right):not(.wrong) { opacity: .5; }
.rm-choice.right { background: #7ee2a8; }
.rm-choice.wrong { background: #ffb4b4; animation: shake .35s; }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }

.rm-stroop { font: 700 clamp(3rem, 13vw, 4.6rem)/1 var(--font-display); letter-spacing: .04em; margin: 0 0 24px; }
.rm-statement { font: 700 clamp(1.8rem, 7vw, 2.4rem)/1.2 var(--font-display); margin: 0 0 22px; }
.rm-choices.two .rm-choice { min-width: 130px; font-size: 1.5rem; padding: 18px 22px; }

.rm-odd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; max-width: 330px; margin: 0 auto; }
.rm-odd.six { grid-template-columns: repeat(6, 1fr); max-width: 380px; }
.rm-odd .rm-choice { min-width: 0; padding: 0; aspect-ratio: 1; font-size: 1.7rem; border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }

.rm-order .rm-choice { min-width: 78px; font-size: 1.5rem; padding: 16px 12px; }
.rm-order .rm-choice[data-step]::after {
  content: attr(data-step);
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: .75rem;
  display: grid;
  place-items: center;
}

.rm-emoji-grid { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; max-width: 420px; margin: -6px auto 22px; font-size: 2rem; line-height: 1.2; }
.rm-copy { font: 700 clamp(2.2rem, 9vw, 3rem)/1 var(--font-display); letter-spacing: .14em; margin: 8px 0 24px; }

/* ---------- results */
.rm-big {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 2.8rem/1 var(--font-display);
  border: 2.5px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  margin: 12px auto 16px;
  animation: pop .35s cubic-bezier(.3, 1.5, .5, 1) both;
}
.rm-big.ok { background: #7ee2a8; }
.rm-big.bad { background: #ffb4b4; }

/* label | digits, two rows, digits lined up under each other */
.rm-compare {
  --w: 34px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px 12px;
  align-items: center;
  justify-content: center;
  margin: 4px 0 22px;
}
.rm-compare .lbl { font-weight: 800; color: var(--muted); font-size: .9rem; text-align: right; }
.rm-digits { display: flex; gap: 4px; flex-wrap: wrap; max-width: calc(var(--per, 99) * (var(--w) + 4px) - 4px); }
.rm-digits span {
  width: var(--w);
  height: calc(var(--w) * 1.3);
  display: grid;
  place-items: center;
  font: 700 calc(var(--w) * .66)/1 var(--font-display);
  border-radius: calc(var(--w) * .24);
  background: var(--soft);
}
.rm-digits span.ok { background: #c8f2d8; }
.rm-digits span.bad { background: #ffc9c9; color: #b3261e; }

.rm-score { margin: 0 0 12px; }
.rm-score b { display: block; font: 700 4.6rem/1 var(--font-display); }
.rm-score span { color: var(--muted); font-weight: 800; }
.rm-newbest {
  display: inline-block;
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 99px;
  padding: 5px 14px 6px;
  font: 600 1rem/1 var(--font-display);
  transform: rotate(-3deg);
  margin: 0 0 14px;
}
.rm-verdict { font: 600 1.3rem/1.35 var(--font-display); margin: 0 0 22px; max-width: 30ch; }
.rm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rm-fact { max-width: 46ch; margin: 26px auto 0; }

@keyframes shake {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@media (max-width: 560px) {
  .rm-number span { border-width: 2px; }
  .rm-task { padding: 20px 14px 18px; }
  .rm-answer-form, .rm-recall-form { flex-direction: column; }
  .rm-recall { font-size: 1.6rem; }
  .rm-choice { padding: 12px 14px; font-size: 1.05rem; }
  .rm-odd .rm-choice { font-size: 1.4rem; }
  .rm-order .rm-choice { min-width: 64px; font-size: 1.3rem; }
  .rm-compare { grid-template-columns: auto; justify-items: center; gap: 4px; }
  .rm-compare .lbl { text-align: center; }
  .rm-compare .rm-digits + .lbl { margin-top: 8px; }
}