/* Unanswered (fresh only) category discs darker; category name text unchanged.
   Do NOT force black on partial / soft / correct / wrong — those need color. */
.category-card--fresh .category-disc {
  background: #000000 !important;
  box-shadow:
    0 0 0 1.5px rgb(255 255 255 / 0.1),
    0 4px 14px rgb(0 0 0 / 0.5) !important;
}

html:not(.dark) .category-card--fresh .category-disc {
  background: #0a0a0a !important;
  box-shadow:
    0 0 0 1.5px rgb(0 0 0 / 0.35),
    0 4px 12px rgb(0 0 0 / 0.2) !important;
}

.category-card--fresh:hover .category-disc {
  background: #050505 !important;
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.18),
    0 0 20px rgb(0 0 0 / 0.55),
    0 14px 28px rgb(0 0 0 / 0.4) !important;
}

/* keep soft accent pulse subtle on dark discs */
.category-card--fresh .category-disc {
  animation: freshPulseDark 3.2s ease-in-out infinite;
}

@keyframes freshPulseDark {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px rgb(255 255 255 / 0.1),
      0 4px 14px rgb(0 0 0 / 0.5);
  }
  50% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--section-accent, #6366f1) 35%, transparent),
      0 0 18px color-mix(in srgb, var(--section-accent, #6366f1) 18%, transparent),
      0 6px 18px rgb(0 0 0 / 0.45);
  }
}

/*
 * Icon ring: no solid black disc (streaks stay visible).
 * Keep ring transparent; answer colors use polyomino halo rules in style.css.
 */
.category-card--fresh .category-icon-ring {
  background: transparent !important;
  box-shadow: none !important;
}

/* Ensure emoji glyphs stay visible without a disc behind them */
.category-card .category-icon {
  opacity: 1 !important;
  visibility: visible !important;
}

/*
 * Partial progress (1/3 or 2/3 answered) — show real green/red fill.
 * Full correct/wrong only apply after the daily quota for that category.
 */
.category-card--correct-soft .category-disc,
.category-card--partial.category-card--correct-soft .category-disc {
  background:
    radial-gradient(circle at 50% 28%, rgb(74 222 128 / 0.5), transparent 62%),
    linear-gradient(165deg, rgb(20 83 45 / 0.9), rgb(6 78 59 / 0.94)) !important;
  box-shadow:
    0 0 0 2px rgb(34 197 94 / 0.55),
    0 0 18px rgb(34 197 94 / 0.35),
    0 4px 14px rgb(0 0 0 / 0.4) !important;
  animation: none !important;
}

.category-card--wrong-soft .category-disc,
.category-card--partial.category-card--wrong-soft .category-disc {
  background:
    radial-gradient(circle at 50% 28%, rgb(248 113 113 / 0.5), transparent 62%),
    linear-gradient(165deg, rgb(127 29 29 / 0.9), rgb(69 10 10 / 0.94)) !important;
  box-shadow:
    0 0 0 2px rgb(239 68 68 / 0.5),
    0 0 18px rgb(239 68 68 / 0.32),
    0 4px 14px rgb(0 0 0 / 0.4) !important;
  animation: none !important;
}

.category-card--correct-soft .category-name {
  color: #86efac !important;
}

.category-card--wrong-soft .category-name {
  color: #fca5a5 !important;
}

/* Partial with no last-result flag — accent ring only */
.category-card--partial:not(.category-card--correct-soft):not(.category-card--wrong-soft) .category-disc {
  background: #000000 !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--section-accent, #6366f1) 55%, transparent),
    0 0 18px color-mix(in srgb, var(--section-accent, #6366f1) 28%, transparent),
    0 4px 14px rgb(0 0 0 / 0.45) !important;
  animation: none !important;
}

/* Finished category (3/3) — ensure full colors win over dark defaults */
.category-card--correct .category-disc {
  background:
    radial-gradient(circle at 50% 28%, rgb(74 222 128 / 0.55), transparent 62%),
    linear-gradient(165deg, rgb(20 83 45 / 0.92), rgb(6 78 59 / 0.96)) !important;
  box-shadow:
    0 0 28px rgb(34 197 94 / 0.55),
    0 4px 14px rgb(34 197 94 / 0.3),
    inset 0 0 30px rgb(74 222 128 / 0.22) !important;
  animation: none !important;
}

.category-card--wrong .category-disc {
  background:
    radial-gradient(circle at 50% 28%, rgb(248 113 113 / 0.55), transparent 62%),
    linear-gradient(165deg, rgb(127 29 29 / 0.92), rgb(69 10 10 / 0.96)) !important;
  box-shadow:
    0 0 28px rgb(239 68 68 / 0.5),
    0 4px 14px rgb(239 68 68 / 0.28),
    inset 0 0 30px rgb(248 113 113 / 0.2) !important;
  animation: none !important;
}

/* In-question multi-Q progress pill */
.question-progress-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  color: #e2e8f0;
  background: rgb(15 23 42 / 0.7);
  border: 1px solid rgb(148 163 184 / 0.35);
  white-space: nowrap;
}

html:not(.dark) .question-progress-pill {
  color: #0f172a;
  background: rgb(255 255 255 / 0.92);
  border-color: rgb(148 163 184 / 0.5);
}