.mini-page {
  --mini-accent-soft: #eeecff;
  --game-content-width: 820px;
}

.pattern-page {
  --game-accent: #7656c9;
  --game-accent-dark: #5636a3;
  --game-bg-a: #eee9ff;
  --game-bg-b: #fff0f7;
  --mini-accent-soft: #f0ebff;
}

.count-page {
  --game-accent: #16856e;
  --game-accent-dark: #0e6655;
  --game-bg-a: #e4f8ef;
  --game-bg-b: #eef7ff;
  --mini-accent-soft: #e5f8f1;
}

.letters-page {
  --game-accent: #2676bd;
  --game-accent-dark: #195b94;
  --game-bg-a: #e5f2ff;
  --game-bg-b: #f1edff;
  --mini-accent-soft: #e8f3ff;
}

.sizes-page {
  --game-accent: #c65f31;
  --game-accent-dark: #98421e;
  --game-bg-a: #fff0e5;
  --game-bg-b: #fff8de;
  --mini-accent-soft: #fff0e5;
}

.mini-game {
  width: min(100%, var(--game-content-width));
  box-sizing: border-box;
  margin: 0 auto 2rem;
}

.mini-round-content,
.mini-completion {
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-xl);
  background: var(--lp-surface);
  box-shadow: var(--lp-shadow);
}

.mini-round-content {
  padding: clamp(1rem, 4vw, 2rem);
}

.mini-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  color: var(--lp-muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.mini-progress-track {
  height: 10px;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf4;
}

.mini-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--game-accent);
  transition: width 240ms ease;
}

.mini-question-card {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--game-accent) 18%, white);
  border-radius: var(--lp-radius-lg);
  background: var(--mini-accent-soft);
}

.mini-prompt {
  margin: 0 0 1rem;
  color: var(--lp-ink);
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 850;
  line-height: 1.3;
}

.mini-challenge {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  padding: 1rem;
}

.pattern-token {
  display: grid;
  width: clamp(48px, 9vw, 72px);
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--lp-shadow-soft);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
}

.pattern-token.missing {
  border: 3px dashed color-mix(in srgb, var(--game-accent) 55%, white);
  background: transparent;
  color: var(--game-accent-dark);
  box-shadow: none;
  font-weight: 900;
}

.count-stage {
  display: flex;
  max-width: 560px;
  min-height: 180px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 auto;
  font-size: clamp(2.2rem, 8vw, 3.5rem);
}

.letter-badge {
  display: grid;
  width: 130px;
  aspect-ratio: 1;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 32px;
  background: var(--game-accent);
  color: #fff;
  box-shadow: var(--lp-shadow-soft);
  font-size: 4.8rem;
  font-weight: 900;
}

.mini-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.mini-choice {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-md);
  background: #fff;
  color: var(--lp-ink);
  box-shadow: 0 4px 12px rgba(45, 55, 85, 0.07);
  font: inherit;
  font-size: 1.08rem;
  font-weight: 850;
  cursor: pointer;
}

.mini-choice:hover:not(:disabled),
.mini-choice:focus-visible {
  border-color: var(--game-accent);
  background: var(--mini-accent-soft);
  transform: translateY(-2px);
}

.mini-choice.correct {
  border-color: #3bb88d;
  background: #e2faef;
  color: #116348;
}

.mini-choice.try-again {
  animation: mini-nudge 220ms ease;
}

.word-choice {
  flex-direction: column;
  font-size: 1rem;
}

.word-choice .choice-emoji {
  font-size: 2.5rem;
}

.number-choice {
  font-size: 1.6rem;
}

.mini-feedback {
  min-height: 3.5rem;
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: var(--lp-radius-md);
  color: var(--lp-muted);
  font-weight: 750;
}

.mini-feedback.success {
  background: #e2faef;
  color: #116348;
}

.mini-feedback.hint {
  background: #fff7d6;
  color: #67510f;
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.mini-action {
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.mini-action.primary {
  background: var(--game-accent-dark);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--game-accent) 24%, transparent);
}

.mini-action.secondary {
  border: 1px solid var(--lp-border);
  background: #fff;
  color: var(--lp-ink);
}

.mini-completion {
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
}

.mini-completion-icon {
  margin-bottom: 0.5rem;
  font-size: 4rem;
}

.mini-completion h2 {
  margin: 0 0 0.7rem;
  color: var(--lp-ink);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.mini-completion p {
  max-width: 34rem;
  margin: 0 auto 1.25rem;
  color: var(--lp-muted);
  font-weight: 650;
}

.size-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.size-choice {
  display: grid;
  min-height: 112px;
  place-items: center;
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius-md);
  background: #fff;
  cursor: pointer;
}

.size-choice:hover:not(:disabled) {
  border-color: var(--game-accent);
  background: var(--mini-accent-soft);
}

.size-choice.selected {
  border-color: #3bb88d;
  background: #e2faef;
}

.size-order {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 0.75rem;
  border: 2px dashed color-mix(in srgb, var(--game-accent) 35%, white);
  border-radius: var(--lp-radius-md);
  background: rgba(255, 255, 255, 0.55);
}

.size-order:empty::before {
  color: var(--lp-muted);
  content: "Deine Reihe erscheint hier";
  font-size: 0.88rem;
  font-weight: 700;
}

.size-order-token {
  display: grid;
  width: 64px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lp-shadow-soft);
}

@keyframes mini-nudge {
  50% {
    transform: translateX(5px);
  }
}

@media (max-width: 620px) {
  .mini-round-content {
    padding: 0.8rem;
    border-radius: 18px;
  }

  .mini-question-card {
    padding: 0.8rem;
  }

  .mini-challenge {
    min-height: 125px;
    padding-inline: 0;
  }

  .mini-choices {
    gap: 0.55rem;
  }

  .mini-choice {
    min-height: 66px;
    padding: 0.65rem 0.45rem;
    font-size: 0.92rem;
  }

  .pattern-token {
    width: clamp(43px, 15vw, 58px);
    border-radius: 14px;
  }

  .count-stage {
    gap: 0.45rem;
  }

  .letter-badge {
    width: 110px;
    font-size: 4rem;
  }

  .size-choice {
    min-height: 96px;
  }
}