/* Color-only update: keep the original layout, type, icons, and frames. */
#app :is(.featureDeck > button:not(.dailyHero), .tile, .foundationGrid > button,
  .skillGrid > button, .gameGrid > button, .creativeCards > button,
  .discoveryCategories > button, .discoveryList > button, .songGrid > button,
  .dayTile, .taskList > button, .hudStoryGrid > button, .hudSticker,
  .hudBookCard, .colorGallery > button, .animalPicker > button,
  .animalBuddyGrid > button, .scenePicker > button, .weatherChoices > button,
  .gradeTopics > div, .factsGrid > div, .storyGroups > section, .ageGoals > p,
  .weatherStats > span) {
  background-image: linear-gradient(125deg, #55d6ff, #70baff) !important;
}
#app :is(.featureDeck, .grid, .foundationGrid, .skillGrid, .gameGrid,
  .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid,
  .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery,
  .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices,
  .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(7n+2) {
  background-image: linear-gradient(125deg, #ffe652, #ffcf42) !important;
}
#app :is(.featureDeck, .grid, .foundationGrid, .skillGrid, .gameGrid,
  .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid,
  .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery,
  .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices,
  .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(7n+3) {
  background-image: linear-gradient(135deg, #ff8acd, #d89cff) !important;
}
#app :is(.featureDeck, .grid, .foundationGrid, .skillGrid, .gameGrid,
  .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid,
  .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery,
  .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices,
  .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(7n+4):not(.dailyHero) {
  background-image: linear-gradient(110deg, #75efb4, #4dddbb) !important;
}
#app :is(.featureDeck, .grid, .foundationGrid, .skillGrid, .gameGrid,
  .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid,
  .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery,
  .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices,
  .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(7n+5) {
  background-image: linear-gradient(130deg, #ffad4d, #ff9354) !important;
}
#app :is(.featureDeck, .grid, .foundationGrid, .skillGrid, .gameGrid,
  .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid,
  .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery,
  .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices,
  .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(7n+6) {
  background-image: linear-gradient(135deg, #b8a1ff, #d1a4ff) !important;
}

/* Brighter shades of the existing home panel colors. */
#app .featureDeck .discoveryHero { background-image: linear-gradient(125deg, #55d6ff, #70baff) !important; }
#app .featureDeck .creativeHero { background-image: linear-gradient(135deg, #ff8acd, #d89cff) !important; }
#app .featureDeck .playHero { background-image: linear-gradient(130deg, #ffad4d, #ff9354) !important; }
#app .featureDeck .foundationHero { background-image: linear-gradient(125deg, #ffe652, #ffcf42) !important; }

/* Reading surfaces use a gentle fade in the same palette. */
#app :is(.panel, .rhymePanel, .hudQuest, .paletteBox, .traceSelect,
  .gradeKey, .pricePanel, .animalBuddyPicker, .hudPrompt, .tuneLine) {
  background-image: linear-gradient(125deg, #55d6ff, #bcecff) !important;
}
body[data-section='creative'] #app :is(.panel, .paletteBox, .traceSelect, .tuneLine),
body[data-page='rhymes'] #app .rhymePanel {
  background-image: linear-gradient(135deg, #ff8acd, #edc9ff) !important;
}
body[data-section='playZone'] #app .panel {
  background-image: linear-gradient(130deg, #ffad4d, #ffe1a1) !important;
}
body:is([data-page='foundationPlay'], [data-page='namePractice'], [data-page='letters']) #app .panel {
  background-image: linear-gradient(125deg, #ffe652, #fff2a0) !important;
}
#app .hudQuest { background-image: linear-gradient(135deg, #b8a1ff, #e0caff) !important; }
#app .pricePanel:nth-of-type(even) { background-image: linear-gradient(110deg, #75efb4, #b7f6dc) !important; }

/* Rainbow panels join the seven-color rotation without changing card layouts. */
#app :is(.featureDeck, .grid, .foundationGrid, .skillGrid, .gameGrid,
  .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid,
  .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery,
  .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices,
  .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(7n),
#app .featureDeck .hudTrailCard, #app .hudBookEntry, #app .themeInvite {
  background-image: linear-gradient(115deg, #ff8eac, #ffb063 20%, #ffe45e 38%, #7fea9e 56%, #70d9ff 76%, #caacff) !important;
}

/* Dark ink keeps the existing small labels readable on the brighter colors. */
#app :is(.foundationGrid, .skillGrid, .gameGrid, .creativeCards,
  .discoveryCategories, .discoveryList, .songGrid, .taskList, .hudStoryGrid,
  .hudBookGrid, .colorGallery, .weatherChoices, .gradeTopics, .factsGrid) :is(b, small, strong),
#app .featureDeck > button:not(.dailyHero) :is(span, small, strong) {
  color: #203252;
}