/* Genre-specific game board backgrounds. */
.board {
  background-color: #dff4ff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body:has(#categoryChoices .choice[data-value="fruit"].selected) .board,
body:has(#categoryChoices .choice[data-value="vegetable"].selected) .board {
  background-image: linear-gradient(#ffffff38, #ffffff26), url("../backgrounds/food.png");
  background-position: center 55%;
}

body:has(#categoryChoices .choice[data-value="vehicle"].selected) .board {
  background-image: linear-gradient(#ffffff26, #ffffff18), url("../backgrounds/vehicle.png");
  background-position: center 48%;
}

body:has(#categoryChoices .choice[data-value="anpan"].selected) .board,
body:has(#categoryChoices .choice[data-value="animal"].selected) .board {
  background-image: linear-gradient(#ffffff35, #ffffff24), url("../backgrounds/animal.png");
  background-position: center 52%;
}

body:has(#categoryChoices .choice[data-value="color"].selected) .board {
  background-image: linear-gradient(#ffffff28, #ffffff18), url("../backgrounds/art-room.svg");
  background-position: center 48%;
}

body:has(#categoryChoices .choice[data-value="milk"].selected) .board {
  background-image: linear-gradient(#ffffff1f, #0000000f), url("../backgrounds/milk.png");
  background-position: center 46%;
}

body:has(#categoryChoices .choice[data-value="holo"].selected) .board {
  background-image: linear-gradient(#ffffff1c, #001b3317), url("../backgrounds/holo.png");
  background-position: center 44%;
}

/* The generated backgrounds already contain scenery, so hide the old decorative clouds. */
body:has(#categoryChoices .choice.selected) .board .cloud {
  display: none;
}