/* Apply the More to Explore palette to all activity cards. */
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+1) { background: linear-gradient(125deg, #ffdb36, #ffed76) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+2) { background: linear-gradient(125deg, #37e2cd, #85f4bc) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+3) { background: linear-gradient(125deg, #5bcaff, #a4dfff) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+4) { background: linear-gradient(125deg, #ff87bf, #ffc0e0) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+5) { background: linear-gradient(115deg, #ff8eac, #ffb063 20%, #ffe45e 38%, #7fea9e 56%, #70d9ff 76%, #caacff) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+6) { background: linear-gradient(125deg, #c09aff, #e1b5ff) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+7) { background: linear-gradient(125deg, #ffb54c, #ffda83) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+8) { background: linear-gradient(125deg, #a8e645, #d5f47c) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+9) { background: linear-gradient(125deg, #ff9d69, #ffc39a) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+10) { background: linear-gradient(125deg, #9dadff, #c9d1ff) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+11) { background: linear-gradient(125deg, #e99afa, #ffc1ee) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+12) { background: linear-gradient(125deg, #6be7ef, #a3f6f3) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+13) { background: linear-gradient(125deg, #ff8f91, #ffc4a8) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+14) { background: linear-gradient(125deg, #f6e54b, #d9f281) !important; color: #24345c; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards, .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid, .hudStickerGrid, .hudBookGrid, .colorGallery, .animalPicker, .animalBuddyGrid, .scenePicker, .weatherChoices, .gradeTopics, .factsGrid, .storyGroups, .ageGoals, .weatherStats) > :nth-child(15n+15) { background: linear-gradient(125deg, #61e3a5, #a9f1cc) !important; color: #24345c; }

/* The same picture-left, text-right card layout as More to Explore. */
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards,
  .discoveryCategories, .songGrid, .dayGrid, .taskList, .hudStoryGrid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards,
  .discoveryCategories, .songGrid, .dayGrid, .taskList, .hudStoryGrid) > button {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  column-gap: 15px;
  row-gap: 5px;
  align-items: center;
  align-content: center;
  justify-content: stretch;
  grid-column: auto;
  position: relative;
  min-width: 0;
  min-height: 118px;
  margin: 0;
  padding: 13px 15px;
  text-align: left;
  border: 3px solid #fff;
  border-radius: 23px;
  box-shadow: 0 5px 0 #776ab458, 0 9px 16px #4f638a23;
}
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards,
  .discoveryCategories, .songGrid, .dayGrid, .taskList, .hudStoryGrid) > button > :not(.panelArt) {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  color: #24345c;
}
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards,
  .discoveryCategories, .songGrid, .dayGrid, .taskList, .hudStoryGrid) > button > b,
#app .dayTile > strong {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}
#app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards,
  .discoveryCategories, .discoveryList, .songGrid, .dayGrid, .taskList, .hudStoryGrid) small {
  color: #24345c;
  font-size: 14px;
  line-height: 1.4;
}
#app .featureDeck > button > strong { font-size: 14px; line-height: 1.3; text-align: left; }
#app :is(.featureDeck, .foundationGrid, .skillGrid, .songGrid, .discoveryCategories) > button::before,
#app .featureDeck > button::after { content: none; }
#app .panelArt {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  padding: 3px;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 4px 0 #4b477529;
  overflow: hidden;
}
#app .panelArt > :is(.panelArtPicture, .sprite) {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: none;
  float: none;
  transform: none;
}
#app .panelArtPicture { background-size: 400% 400%; }
#app .discoveryCategories .meter { clear: none; width: 100%; }
#app .hudStoryGrid > button > .panelArt { grid-row: 1 / span 4; }
#app .dayTile em { width: max-content; }
#app .discoveryList > button {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 20px;
  gap: 15px;
  align-items: center;
  min-width: 0;
  border-radius: 23px;
  padding: 13px 15px;
  border: 3px solid #fff;
  box-shadow: 0 5px 0 #776ab458, 0 9px 16px #4f638a23;
}
#app .discoveryList > button > .panelArt { grid-row: 1; }
#app .discoveryList > button > div:not(.panelArt) { grid-column: 2; min-width: 0; }
#app .discoveryList > button > strong { grid-column: 3; color: #24345c; }
#app :is(.hudBookEntry, .themeInvite) {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  column-gap: 15px;
  row-gap: 5px;
  align-items: center;
}
#app :is(.hudBookEntry, .themeInvite) > :not(.panelArt) { grid-column: 2; min-width: 0; }
#app :is(.hudBookEntry, .themeInvite) .panelArt { grid-row: 1 / span 2; }
#app :is(.hudBookEntry, .themeInvite) :is(b, strong) { font-size: 20px; color: #24345c; }
#app :is(.hudBookEntry, .themeInvite) small { font-size: 14px; color: #24345c; line-height: 1.4; }
@media (min-width: 620px) {
  #app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards,
    .discoveryCategories, .songGrid, .dayGrid, .taskList, .hudStoryGrid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 380px) {
  #app :is(.featureDeck, .foundationGrid, .skillGrid, .gameGrid, .creativeCards,
    .discoveryCategories, .songGrid, .dayGrid, .taskList, .hudStoryGrid) > button,
  #app :is(.hudBookEntry, .themeInvite) {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 11px;
    padding: 12px;
  }
  #app .panelArt { width: 72px; height: 72px; flex-basis: 72px; }
  #app .discoveryList > button { grid-template-columns: 72px minmax(0, 1fr) 18px; gap: 11px; padding: 12px; }
}