:root {
  --capy-ink: #2d234f;
  --capy-purple: #5b46c5;
  --capy-violet: #8875e8;
  --capy-cream: #fffaf0;
  --capy-sand: #f6d88c;
  --capy-green: #3eaa7b;
  --capy-green-soft: #ddf7e9;
  --capy-coral: #e9655b;
  --capy-blue-soft: #eaf8fc;
}

.capy-level-page { background: #f6f3ff; }

.capy-game {
  max-width: 880px;
  padding-block: 14px 28px;
}

.capy-game-bar {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.capy-game-bar h1 {
  margin: 0;
  color: var(--capy-ink);
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  white-space: nowrap;
}

.capy-game-bar h1 small {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--capy-purple);
  font-size: .62em;
  vertical-align: .12em;
}

.capy-game-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.capy-tier,
.capy-counter,
.capy-streak {
  min-height: 34px;
  padding: 5px 9px;
  border: 2px solid #ded8f3;
  border-radius: 999px;
  color: var(--capy-ink);
  background: #fff;
  font-size: .74rem;
  font-weight: 900;
  white-space: nowrap;
}

.capy-tier { border-color: #e6c258; background: #fff2bd; }
.capy-streak { color: #6a4017; }

.capy-sound {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #ded8f3;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.capy-sound:focus-visible,
.capy-options button:focus-visible,
.capy-track-picker button:focus-visible,
.capy-help-row button:focus-visible,
.capy-finale-card button:focus-visible,
.capy-finale-home:focus-visible,
.capy-finale-next:focus-visible {
  outline: 4px solid rgba(85,185,232,.55);
  outline-offset: 3px;
}

.capy-track-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 5px 0 8px; }
.capy-track-picker button { min-height: 48px; padding: 6px 12px; border: 2px solid #ded8f3; border-radius: 13px; color: var(--capy-ink); background: #fff; cursor: pointer; }
.capy-track-picker strong,.capy-track-picker small { display: block; }
.capy-track-picker button.is-active { border-color: var(--capy-purple); background: #ebe7ff; }

.capy-progress {
  display: grid;
  grid-template-columns: repeat(10,1fr);
  gap: 5px;
  padding: 0;
  margin: 8px 0 10px;
  list-style: none;
}

.capy-progress li {
  height: 7px;
  border-radius: 999px;
  background: #ddd7f1;
}

.capy-progress li.done { background: var(--capy-green); }
.capy-progress li.now { background: var(--capy-purple); box-shadow: 0 0 0 2px #fff,0 0 0 4px #cfc5fb; }

.capy-board {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  border: 4px solid var(--capy-ink);
  border-radius: 24px;
  background-color: #fff;
  background-image: radial-gradient(rgba(91,70,197,.09) 1.2px,transparent 1.2px);
  background-size: 20px 20px;
  box-shadow: 8px 9px 0 var(--capy-sand);
}

.capy-puzzle-head {
  display: flex;
  min-height: 94px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  border: 2px solid #e2dcf4;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
}

.capy-mode {
  margin: 0 0 3px;
  color: var(--capy-purple);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.capy-puzzle-head h2 {
  margin: 0;
  color: var(--capy-ink);
  font-size: clamp(1.25rem,3vw,1.8rem);
}

.capy-buddy {
  position: relative;
  width: 108px;
  height: 82px;
  flex: 0 0 auto;
}

.capy-picture,
.capy-picture img {
  display: block;
  width: 82px;
  height: 82px;
}

.capy-picture { margin-left: auto; }
.capy-picture img { object-fit: contain; }

.capy-message {
  position: absolute;
  right: 60px;
  bottom: 1px;
  min-width: 72px;
  max-width: 135px;
  padding: 4px 7px;
  margin: 0;
  border: 2px solid var(--capy-ink);
  border-radius: 8px;
  color: var(--capy-ink);
  background: #fff;
  font-size: .65rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.capy-message:empty { display: none; }

.capy-clues {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}

.capy-clues .machine-row {
  display: grid;
  min-height: 50px;
  grid-template-columns: 1fr auto 1fr;
  place-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 2px solid #ddd6f2;
  border-radius: 12px;
  color: var(--capy-ink);
  background: #f6f3ff;
  font-size: 1.18rem;
  font-weight: 950;
}

.machine-row-arrow { color: var(--capy-coral); }

.capy-run {
  display: grid;
  max-width: 590px;
  width: 100%;
  grid-template-columns: 70px 24px minmax(125px,1fr) 24px 70px;
  align-items: center;
  justify-self: center;
  gap: 8px;
  padding: 5px 0;
}

.capy-run > i {
  color: var(--capy-coral);
  font-size: 1.55rem;
  font-style: normal;
  font-weight: 1000;
  text-align: center;
}

.capy-number {
  display: grid;
  min-height: 72px;
  place-items: center;
  border: 3px solid var(--capy-ink);
  border-radius: 15px;
  color: var(--capy-ink);
  background: #fff;
  font-size: 1.9rem;
  font-weight: 1000;
  box-shadow: 4px 4px 0 #d7cef6;
}

.capy-output { background: #fff2bd; }
.is-mystery { color: var(--capy-purple); }

.capy-machine-box {
  position: relative;
  display: grid;
  min-height: 86px;
  place-items: center;
  align-content: center;
  overflow: hidden;
  border: 4px solid var(--capy-ink);
  border-radius: 20px;
  color: #fff;
  background: var(--capy-purple);
  box-shadow: 5px 6px 0 var(--capy-sand);
}

.capy-machine-box::before {
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(255,255,255,.35);
  border-radius: 13px;
  content: "";
}

.capy-machine-box small,
.capy-machine-box strong { position: relative; }
.capy-machine-box small { font-size: .58rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.capy-machine-box strong { font-size: 1.65rem; line-height: 1.05; }
.capy-gears { position: absolute; right: 9px; bottom: 1px; color: rgba(255,255,255,.22); font-size: 2rem; }

.capy-options {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 9px;
}

.capy-options button {
  min-height: 60px;
  border: 3px solid var(--capy-ink);
  border-radius: 14px;
  color: var(--capy-ink);
  background: #f6f3ff;
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 1000;
  box-shadow: 0 4px 0 #cfc6ee;
}

.capy-options button:active { transform: translateY(3px); box-shadow: none; }
.capy-options button.is-correct { border-color: #27835e; color: #155b42; background: var(--capy-green-soft); box-shadow: 0 4px 0 #27835e; animation: capy-correct 480ms ease; }
.capy-options button.is-wrong { border-color: #d86962; color: #8d3934; background: #fff0ed; opacity: .72; animation: capy-wrong 360ms ease; }
.capy-options button:disabled { cursor: default; }
.capy-help-row { display: flex; justify-content: center; gap: 8px; }
.capy-help-row button { min-height: 42px; padding: 7px 14px; border: 2px solid #cfc6ee; border-radius: 999px; color: var(--capy-purple); background: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.capy-help-row #machine-next { border-color: var(--capy-purple); color: #fff; background: var(--capy-purple); }
.capy-feedback { min-height: 42px; padding: 8px 10px; border-radius: 10px; color: #4b4268; background: #f4f1ff; font-weight: 750; text-align: center; }

#machine-visual.is-celebrating .capy-machine-box { animation: capy-machine-pop 560ms ease; }
#machine-visual.is-celebrating .capy-gears { animation: capy-spin 720ms linear; }
#machine-visual.is-shaken .capy-machine-box { animation: capy-machine-hmm 380ms ease; }
.capy-bounce { animation: capy-buddy-pop 600ms ease; }

.capy-finale {
  position: fixed;
  z-index: 20;
  display: grid;
  inset: 0;
  place-items: center;
  padding: 18px;
  background: rgba(35,27,79,.72);
  backdrop-filter: blur(4px);
}

.capy-finale-card {
  width: min(100%,360px);
  padding: 24px;
  border: 4px solid var(--capy-ink);
  border-radius: 22px;
  color: var(--capy-ink);
  background: #fff;
  box-shadow: 8px 9px 0 var(--capy-sand);
  text-align: center;
  animation: capy-finale-in 520ms ease;
}

.capy-finale-card img { width: 130px; height: 130px; object-fit: contain; }
.capy-finale-card h2 { margin: 5px 0 8px; font-size: 1.65rem; }
.capy-finale-card .eyebrow { margin: 4px 0 0; }
.capy-finale-card p:not(.eyebrow) { color: var(--muted); }
.capy-finale-card .button { margin: 8px 0 13px; }
.capy-finale-next { display: inline-flex; text-decoration: none; }
.capy-finale-home { display: block; color: var(--capy-purple); font-weight: 850; }
.capy-demo-card { width: min(100%,430px); }
.capy-demo-card strong { color: var(--capy-purple); }
.capy-finale-card .parent-result { margin: 12px 0; padding: 9px 11px; border-radius: 11px; background: #f3f0ff; text-align: left; }
.capy-finale-card .parent-result summary { color: var(--capy-purple); font-weight: 900; cursor: pointer; }
.capy-finale-card .parent-result p { margin: 6px 0 0; }

.capy-level-page .noscript-note { margin-top: 15px; }

@keyframes capy-spin { to { transform: rotate(360deg); } }
@keyframes capy-correct { 45% { transform: translateY(-4px) scale(1.04); } }
@keyframes capy-wrong { 25%,75% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes capy-machine-pop { 45% { transform: scale(1.04); filter: drop-shadow(0 0 7px #8fe1bb); } }
@keyframes capy-machine-hmm { 25%,75% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes capy-buddy-pop { 40% { transform: translateY(-7px) rotate(-2deg); } 70% { transform: translateY(1px) rotate(2deg); } }
@keyframes capy-finale-in { from { transform: translateY(20px) scale(.9); } }

@media (max-width: 700px) {
  .capy-level-page .header-inner { min-height: 52px; }
  .capy-game { width: min(calc(100% - 10px),880px); padding-block: 5px 24px; }
  .capy-game-bar { min-height: 39px; gap: 6px; }
  .capy-game-bar h1 { font-size: .96rem; }
  .capy-game-bar h1 small { margin-left: 2px; padding: 2px 5px; }
  .capy-game-status { gap: 3px; }
  .capy-track-picker { gap: 4px; margin: 2px 0 4px; }
  .capy-track-picker button { min-height: 38px; padding: 3px 6px; font-size: .7rem; }
  .capy-tier { display: none; }
  .capy-counter,.capy-streak { min-height: 29px; padding: 3px 7px; border-width: 1px; font-size: .65rem; }
  .capy-sound { width: 31px; height: 31px; border-width: 1px; }
  .capy-progress { gap: 3px; margin: 4px 3px 6px; }.capy-progress li { height: 5px; }
  .capy-board { gap: 7px; padding: 7px; border-width: 3px; border-radius: 14px; box-shadow: none; }
  .capy-puzzle-head { min-height: 60px; padding: 4px 5px 4px 9px; border-radius: 10px; }
  .capy-mode { font-size: .55rem; }.capy-puzzle-head h2 { font-size: 1rem; }
  .capy-buddy { width: 72px; height: 57px; }.capy-picture,.capy-picture img { width: 57px; height: 57px; }
  .capy-message { right: 43px; bottom: -1px; min-width: 53px; max-width: 92px; padding: 2px 4px; border-width: 1px; font-size: .52rem; }
  .capy-clues { gap: 4px; }.capy-clues .machine-row { min-height: 42px; gap: 2px; padding: 4px 3px; border-width: 2px; border-radius: 8px; font-size: .86rem; }
  .capy-run { grid-template-columns: 48px 13px minmax(104px,1fr) 13px 48px; gap: 3px; padding: 0 3px; }
  .capy-run > i { font-size: 1rem; }
  .capy-number { min-height: 57px; border-width: 2px; border-radius: 10px; font-size: 1.4rem; box-shadow: 2px 2px 0 #d7cef6; }
  .capy-machine-box { min-height: 63px; border-width: 3px; border-radius: 13px; box-shadow: 3px 3px 0 var(--capy-sand); }.capy-machine-box::before { inset: 5px; border-width: 1px; border-radius: 8px; }.capy-machine-box strong { font-size: 1.25rem; }.capy-gears { font-size: 1.35rem; }
  .capy-options { grid-template-columns: 1fr 1fr; gap: 5px; }.capy-options button { min-height: 45px; border-width: 2px; border-radius: 9px; font-size: 1.05rem; box-shadow: 0 3px 0 #cfc6ee; }
  .capy-help-row button { min-height: 38px; padding: 5px 11px; font-size: .78rem; }
  .capy-feedback { min-height: 34px; padding: 5px 7px; font-size: .75rem; }
  .capy-level-page .content-section { padding-block: 52px; }
}

@media (max-width: 340px) {
  .capy-game-bar h1 { font-size: .88rem; }
  .capy-counter,.capy-streak { padding-inline: 5px; }
  .capy-board { gap: 6px; padding: 6px; }
  .capy-puzzle-head { min-height: 56px; }.capy-buddy { width: 66px; height: 52px; }.capy-picture,.capy-picture img { width: 52px; height: 52px; }
  .capy-clues .machine-row { min-height: 39px; font-size: .82rem; }
  .capy-run { grid-template-columns: 44px 11px minmax(96px,1fr) 11px 44px; }.capy-number { min-height: 52px; }.capy-machine-box { min-height: 57px; }
  .capy-options button { min-height: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  .capy-bounce,.capy-options button,.capy-machine-box,.capy-gears,.capy-finale-card { animation: none !important; }
}