/* Each activity keeps its own color even when the age filter changes the list. */
#app .moreExplore .tile[data-activity] {
  background: var(--explore-color) !important;
  color: #24345c;
}
#app .moreExplore .tile[data-activity='letters'] { --explore-color: linear-gradient(125deg, #ffdb36, #ffed76); }
#app .moreExplore .tile[data-activity='count'] { --explore-color: linear-gradient(125deg, #37e2cd, #85f4bc); }
#app .moreExplore .tile[data-activity='animals'] { --explore-color: linear-gradient(125deg, #5bcaff, #a4dfff); }
#app .moreExplore .tile[data-activity='trace'] { --explore-color: linear-gradient(125deg, #ff87bf, #ffc0e0); }
#app .moreExplore .tile[data-activity='color'] { --explore-color: linear-gradient(115deg, #ff8eac, #ffb063 20%, #ffe45e 38%, #7fea9e 56%, #70d9ff 76%, #caacff); }
#app .moreExplore .tile[data-activity='rhymes'] { --explore-color: linear-gradient(125deg, #c09aff, #e1b5ff); }
#app .moreExplore .tile[data-activity='music'] { --explore-color: linear-gradient(125deg, #ffb54c, #ffda83); }
#app .moreExplore .tile[data-activity='match'] { --explore-color: linear-gradient(125deg, #a8e645, #d5f47c); }
#app .moreExplore .tile[data-activity='memory'] { --explore-color: linear-gradient(125deg, #ff9d69, #ffc39a); }
#app .moreExplore .tile[data-activity='read'] { --explore-color: linear-gradient(125deg, #9dadff, #c9d1ff); }
#app .moreExplore .tile[data-activity='build'] { --explore-color: linear-gradient(125deg, #e99afa, #ffc1ee); }
#app .moreExplore .tile[data-activity='sound'] { --explore-color: linear-gradient(125deg, #6be7ef, #a3f6f3); }
#app .moreExplore .tile[data-activity='pattern'] { --explore-color: linear-gradient(125deg, #ff8f91, #ffc4a8); }
#app .moreExplore .tile[data-activity='wordMatch'] { --explore-color: linear-gradient(125deg, #f6e54b, #d9f281); }
#app .moreExplore .tile[data-activity='numberSteps'] { --explore-color: linear-gradient(125deg, #61e3a5, #a9f1cc); }
#app .moreExplore .tile :is(b, small) { color: #24345c; }
#app .moreExplore .tile .icon {
  width: 86px;
  height: 86px;
  overflow: hidden;
  background: #fff;
}
.exploreArt {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff url('more-explore-atlas.png') no-repeat;
  background-size: 400% 400%;
}
@media (max-width: 380px) {
  #app .moreExplore .tile { gap: 11px; }
  #app .moreExplore .tile .icon { width: 72px; height: 72px; }
}