.scramble { display: grid; justify-items: center; gap: 22px; margin-top: 10px; }

.progress { display: flex; gap: 6px; }
.progress span {
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}
.progress .current { background: var(--text); color: var(--bg); }
.progress .clean { background: var(--hit-bg); color: var(--hit-fg); }
.progress .hinted { background: var(--near-bg); color: var(--near-fg); }
.progress .skipped { background: var(--miss-bg); color: var(--miss-fg); text-decoration: line-through; }

/* Up to seven tiles across a phone screen. */
.slots, .pool {
  --tile: min(54px, calc((100vw - 32px - 6 * 8px) / 7));
  display: flex;
  justify-content: center;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
}

.slot, .letter {
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  padding: 0;
  border-radius: 12px;
  font-size: calc(var(--tile) * 0.5);
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.slot { border: 2px dashed var(--line-strong); background: transparent; }
.slot.filled { border-style: solid; background: var(--surface); animation: press 0.12s ease; }
.slots.solved .slot { border-color: transparent; background: var(--hit-bg); color: var(--hit-fg); animation: hop 0.4s ease both; animation-delay: calc(var(--k) * 60ms); }
.slots.skipped .slot { border-color: transparent; background: var(--miss-bg); color: var(--miss-fg); }
.slots.shake { animation: shake 0.35s ease; }

.letter {
  border: 2px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 3px 0 var(--line-strong);
}
.letter:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 var(--line-strong); }
.letter:disabled { visibility: hidden; }
.slot:focus-visible, .letter:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; }
.summary span { padding: 6px 12px; border-radius: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.summary .clean { background: var(--hit-bg); color: var(--hit-fg); }
.summary .hinted { background: var(--near-bg); color: var(--near-fg); }
.summary .skipped { background: var(--miss-bg); color: var(--miss-fg); }

.scramble .controls { width: 100%; margin-top: 0; }
.scramble .message { margin: 0; }

@keyframes press { 50% { scale: 1.08; } }
@keyframes hop { 40% { translate: 0 -10px; } }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }