#prototype + .candidate-nav { margin: 12px 0 0; }

.simon-readout, .shell-readout, .rhythm-readout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.simon-phase, .shell-phase, .rhythm-score { color: #273e61; }

.simon-pads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.simon-pads button {
  display: grid;
  place-items: center;
  min-height: 85px;
  padding: 5px;
  border: 1px solid var(--pad-border);
  border-radius: 5px;
  background: var(--pad-bg);
  color: var(--pad-ink);
  font: 33px/1 Arial, sans-serif;
  touch-action: manipulation;
}
.simon-pads button:nth-child(1) { --pad-bg: #e2ebff; --pad-ink: #2b57ac; --pad-border: #b0c4eb; }
.simon-pads button:nth-child(2) { --pad-bg: #faedcf; --pad-ink: #865719; --pad-border: #d9bd83; }
.simon-pads button:nth-child(3) { --pad-bg: #e0f0e8; --pad-ink: #28694c; --pad-border: #acd1bf; }
.simon-pads button:nth-child(4) { --pad-bg: #eee5f7; --pad-ink: #764397; --pad-border: #cab5dd; }
.simon-pads button[aria-disabled="true"] { cursor: default; }
.simon-pads button:hover[aria-disabled="false"] { box-shadow: inset 0 0 0 2px var(--pad-border); }
.simon-pads button[data-lit] { background: var(--pad-ink); color: white; box-shadow: inset 0 0 0 3px #ffffff7a; }
.simon-steps { display: flex; justify-content: center; gap: 5px; min-height: 5px; margin-top: 10px; }
.simon-steps span { width: 18px; height: 5px; border-radius: 2px; background: #dbe2ed; }
.simon-steps span[data-filled] { background: var(--blue); }

.shell-stage {
  position: relative;
  isolation: isolate;
  height: 174px;
  overflow: hidden;
  border: 1px solid #ccd4df;
  border-radius: 4px;
  background:
    linear-gradient(transparent 72%, #bd947b 72% 73%, transparent 73%),
    repeating-linear-gradient(2deg, #e8d5c3 0 3px, #eadacb 3px 7px);
}
.shell-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#f8f1eaaa, transparent 75%);
  pointer-events: none;
}
.shell-cup {
  position: absolute;
  z-index: 2;
  top: 64px;
  width: clamp(62px, 24%, 96px);
  height: 69px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  translate: -50% 0;
  background: transparent;
  touch-action: manipulation;
}
.shell-cup:focus-visible { outline-color: #14438e; }
.shell-glass {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, #154180 2%, #3e73bb 26%, #24538f 65%, #153865 100%);
  clip-path: polygon(22% 2%, 78% 2%, 98% 94%, 89% 100%, 11% 100%, 2% 94%);
  transition: translate .22s ease-out;
}
.shell-glass::before {
  content: '';
  position: absolute;
  inset: 0 22% auto;
  height: 7px;
  border-radius: 50%;
  background: #527fba;
}
.shell-glass::after {
  content: '';
  position: absolute;
  inset: auto 0 2px;
  height: 6px;
  border-block: 1px solid #b0cbe5;
  background: #1d457a;
}
.shell-cup[data-lifted] .shell-glass { translate: 0 -43px; }
.shell-cup[data-guess="wrong"] .shell-glass { filter: saturate(.55); }
.shell-ball {
  position: absolute;
  z-index: 1;
  top: 110px;
  width: 19px;
  height: 19px;
  border: 1px solid #a84921;
  border-radius: 50%;
  translate: -50% 0;
  background: radial-gradient(circle at 35% 27%, #ffd096, #e17836 55%, #ac4926);
  box-shadow: 0 4px 4px #523a2866;
}

.rhythm-field {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 178px;
  overflow: hidden;
  border: 1px solid #1b3458;
  border-radius: 4px;
  background: #182a46;
  color: white;
  touch-action: manipulation;
}
.rhythm-field:focus-visible { outline-offset: 2px; }
.rhythm-lane {
  position: relative;
  background: repeating-linear-gradient(0deg, transparent 0 24px, #c5d6f218 24px 25px);
}
.rhythm-lane + .rhythm-lane { border-left: 1px solid #aec4e643; }
.rhythm-lane::after {
  content: '';
  position: absolute;
  top: 38px;
  inset-inline: 0;
  border-top: 1px solid #a9bedf9c;
}
.rhythm-receptor, .rhythm-note {
  position: absolute;
  z-index: 1;
  left: 50%;
  display: grid;
  place-items: center;
  width: 35px;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 5px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.rhythm-receptor { top: 38px; border: 1px solid #9db9e5; background: #233a5d; color: #c5d7ef; }
.rhythm-note { z-index: 2; border: 1px solid #cee0ff; background: #80abf8; color: #0f2c58; }
.rhythm-note[data-practice] { border-color: #f0d6a5; background: #ebc57e; color: #4c3615; }
.rhythm-lane[data-feedback="hit"] .rhythm-receptor { border-color: #a8e0c4; background: #226048; color: white; }
.rhythm-lane[data-feedback="miss"] .rhythm-receptor { border-color: #e8aaa7; background: #743b49; color: white; }
.rhythm-feedback {
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 50%;
  translate: -50% 0;
  color: #e3eeff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.rhythm-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.rhythm-keys button { min-height: 44px; font-size: 20px; touch-action: manipulation; }
.rhythm-keys button[aria-disabled="true"] { color: #627188; background: #f1f3f7; cursor: default; }
.rhythm-keys button:active[aria-disabled="false"] { background: #dce8ff; border-color: var(--blue); }