:root {
  font-family:  Avenir, Helvetica, Arial, sans-serif;
  background-color: #222;

  /* Blue seems to be the most contrastive color for showing
   * the differences that have been found. The silhouette of
   * of the fruit is surrounded by a drop-shadow glow.
   */
  --angle: 240deg;
  --glow: #009a;
  --hint: #00f6;

  --image-width: 640px;
  --image-height: 400px;

  counter-reset:
    remaining 0
    total 0;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* Centre the main element */
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  /* Position images relative to main */
  position: relative;
}

/* Instructions and Congratulations */
h1 {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.95rem;
  line-height: 1em;
  margin: 0.5em 10px;
  display: inline-block;
  background-color: #fff;
}
span.remaining::before {
  content: counter(remaining);
  color: red;
}
h1 span::after {
  content: counter(total);
}
/* Hide .found message until all checkboxes are checked */
h1.found {
  display: none;
  color: #c60;

  /* HACK: Use i to hide the Show Hints checkbox */
  i {
    position: absolute;
    top: 0.5em;
    left: 440px;
    background-color: #fff;
    display: inline-block;
    width: 190px;
    height: 25px;
  }
}

/* If all the (non-slider) checkboxes are checked, then you
 * have won. Show the h1.found message whose opaque background
 * will hide the message telling you how many more differences
 * to find. The h1's child i element will hide the now unneeded
 * Show Hints checkbox slider.
 */
label:has(#f0:checked) ~
label:has(#f1:checked) ~
label:has(#f2:checked) ~
label:has(#f3:checked) ~
label:has(#f4:checked) ~
label:has(#f5:checked) ~
label:has(#f6:checked) ~
label:has(#f7:checked) ~
label:has(#f8:checked) ~
label:has(#f9:checked) ~
h1.found {
  display: block;
}

/* Position all images absolutely... which means that their
 * dimensions will not set the dimensions of their parent divs...
 */
img {
  position: absolute;
  top: 0;
  left: 0;
}

div {
  /* ... so explicitly make the (parent) divs the size of the
   * images they contain
   */
  position: relative;
  width: var(--image-width);
  height: var(--image-height);
}

/* Align the differences div with the top image. Its
 * height will be limited by the rule above, but its
 * overflow content will not be hidden.
 */
div#differences {
  position: absolute;
  top: 0;
  left: 0;
}

/* Hide all the checkboxes. (Only show their labels.) */
input {
  position: absolute;
  display: inline-block;
  top: 0;
  left: -999px;
}


/* Highlight color */

div.color {
  --size: 24px;
  --twice: calc(2 * var(--size));
  position: absolute;
  top: 57px;
  right: 0.2em;
}

div.color span {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  background-color: #8c8;
  border: 1px solid white;

}

html:has(div.color input#green:checked) {
  --angle: 120deg;
  --glow: #090a;
  --hint: #0f03;
}

div.color label:nth-child(2) span {
  right: var(--size);
  background-color: #c96;
}

html:has(div.color input#orange:checked) {
  --angle:60deg;
  --glow: #990a;
  --hint: #fc05;
}

div.color label:nth-child(3) span {
  right: var(--twice);
  background-color: #f88;
}

html:has(div.color input#red:checked) {
  --angle: 0deg;
  --glow: #900a;
  --hint: #f003;
}

div.color label:nth-child(4) span {
  top: var(--size);
  right: var(--size);
  background-color: #f8f;
}

html:has(div.color input#magenta:checked) {
  --angle: 300deg;
  --glow: #909a;
  --hint: #f0f3;
}

div.color label:nth-child(5) span {
  top: var(--twice);
  background-color: #99f;
}

html:has(div.color input#blue:checked) {
  --angle: 240deg;
  --glow: #009a;
  --hint: #00f3;
}

div.color label:nth-child(6) span {
  top: var(--size);
  background-color: #9cc;
}

html:has(div.color input#cyan:checked) {
  --angle: 180deg;
  --glow: #099a;
  --hint: #0ff4;
}

div.color input:checked ~ span {
  border: 2px solid black;
}

/* Each (missing) fruit in each image has an invisible custom-
 * fitted span overlay that reacts to the pointer. These must
 * be positioned absolutely.
 */
span.fruit {
  position: absolute;
  display: inline-block;
}

/* Show the overlay spans for fruit that have not yet been found
 *if Show Hints is checked
 */
label:has(#show-hints:checked) ~
 label:has(input:not(:checked))
 span.fruit {
  background-color: var(--hint);
}

/* Each different checkbox has a parent label, and each parent
 * label contains two overlay spans, one over each game image.
 * The spans over the lower image need to be offset by the
 * height of the upper image, so they are placed each in their
 * own span.delta. This means that the same relative top and
 * left values can be used over both images.
*/
span.delta {
  position: absolute;
  top: var(--image-height);
}

/* The position, dimensions, rotation and various corner radii
 * for the overlay spans have been chosen by trial and error to
 * fit the shape of each fruit as accurately as possible. It's
 * OK that this shape is not exact, because the player will
 * never see the overlays.
 *
 * The exact shape of each fruit is stored in a .WEBP image,
 * which will be shown when the overlay span is clicked.
 * However, there is currently no way to detect if the pointer
 * is over the transparent part of an image, and for simplicity
 * these images are the same size as the main image. Like the
 * overlay spans, these .WEBP images initially have an opacity
 * of 0.
 */

/* The stem of the yellow bell pepper is best covered by two
 * spans
 */
span.pepper-1 {
  left: 55px;
  top: 150px;
  width: 45px;
  height: 20px;
  border-radius: 100%;
  transform: rotate(30deg)
}

span.pepper-2 {
  left: 91px;
  top: 152px;
  width: 43px;
  height: 19px;
  border-radius: 100%;
  transform: rotate(-30deg)
}

/* There are two avocados to find */
span.avocado_1  {
  left: 56px;
  top: 322px;
  width: 75px;
  height: 55px;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  transform: rotate(40deg)
}

span.kiwi  {
  left: 219px;
  top: 294px;
  width: 60px;
  height: 72px;
  border-radius: 100%;
  transform: rotate(-10deg)
}

span.orange  {
  left: 268px;
  top: 225px;
  width: 45px;
  height: 66px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 1000%;
  transform: rotate(13deg)
}

span.coconut  {
  left: 317px;
  top: 128px;
  width: 94px;
  height: 64px;
  border-top-left-radius: 75px;
  border-top-right-radius: 90px;
  border-bottom-right-radius: 60px;
  transform: rotate(55deg)
}

span.apple  {
  left: 300px;
  top: 273px;
  width: 94px;
  height: 93px;
  border-radius: 100px;
}

span.asparagus  {
  left: 336px;
  top: 5px;
  width: 26px;
  height: 110px;
  border-top-left-radius: 400px;
  border-top-right-radius: 500%;
  border-bottom-left-radius: 2000%;
  transform: rotate(16deg)
}

span.leaf  {
  left: 442px;
  top: 211px;
  width: 50px;
  height: 45px;
  border-top-left-radius: 18px;
  border-bottom-right-radius: 33px;
  border-bottom-left-radius: 10px;
}

span.grapes  {
  left: 530px;
  top: 113px;
  width: 60px;
  height: 38px;
  border-top-right-radius: 20px;
  border-top-left-radius: 500%;
  border-bottom-right-radius: 110px;
  transform: rotate(16deg)
}

span.avocado_2  {
  left: 571px;
  top: 277px;
  width: 58px;
  height: 65px;
  border-top-left-radius: 500%;
  border-top-right-radius: 1500%;
  border-bottom-right-radius: 300px;
  border-bottom-left-radius: 300px;
  transform: rotate(40deg)
}

/* Each fruit has a image that shows its exact silhouette. For
 * simplicity, all images are exactly the same size as the main
 * images, with a transparent background. To prevent these images
 * from capturing pointer events intended for the overlay spans
 * beneath them, they are set to not react with the pointer.
 *
 * They are initially hidden...
 */

label img {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}

/* ... and they will be shown when an associated overlay span
 * is pressed. Pressing an overlay span toggles the checkbox
 * in the same label. The fruit in the top image is a direct
 * sibling of the checkbox input. The fruit in the bottom image
 * is contained in a span.delta. Both need to be shown when the
 * checkbox input is checked.
 */

input:checked ~ img,
input:checked ~ span img {
  opacity: 0.5;
  filter:
    invert(1)
    brightness(50%)
    sepia(100%)
    saturate(10000%)
    hue-rotate(var(--angle))
    drop-shadow( 2px  0px 2px var(--glow))
    drop-shadow( 0px  2px 2px var(--glow))
    drop-shadow(-2px  2px 2px var(--glow))
    drop-shadow( 0px -2px 2px var(--glow))
  ;
}

/* Count all the non-slider inputs to calculate total */
input:not([class],[name]) {
  counter-increment: total;
}

/* The span immediately after a non-slider checkbox is hidden
 * when the checkbox is checked. Counting those that are still
 * displayed gives the number of differences still to find.
 */
input:not([class], [name]):not(:checked) + span {
  counter-increment: remaining
}

/* Hide the active label element, so you can't uncheck the box */
input:not([class],[name]):checked + span,
input:not([class],[name]):checked ~ span span {
  display: none;
}

/* A subtle "move-glow" animation helps to draw attention to
 * to fruit that have been found.
 *
 * There is also a checkbox which allows players to switch off
 * the glow animation, in case this makes them feel queasy.
 */

.slider ~ span {
  position: absolute;
  top: 0.4em;
  right: 0.2em;
  padding-right: 2.5em;
}

#show-hints.slider ~ span {
  top: 2em;
}

.slider ~ span::before,
.slider ~ span::after {
  content: "";
  position: absolute;
  display: inline-block;
  top: 0.2em;
  right: 0.1em;
  height: 1em;
  width: 2em;
  box-sizing: border-box;
  background-color: grey;
  border: 1px solid grey;
  border-radius: 1em;
}

.slider ~ span::after {
  width: 1em;
  right: 1.1em;
  background-color: white;
  transition: right 0.2s;
}

.slider:checked ~ span::before {
  background-color: var(--glow);
}

.slider:checked ~ span::after {
  width: 1em;
  right: 0.1em;
}

label:has(#move-glow:checked) ~ label:has(input:checked) img {
  animation-name: move-glow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes move-glow {
  0% {
    filter:
      invert(1)
      brightness(50%)
      sepia(100%)
      saturate(10000%)
      hue-rotate(var(--angle))
      drop-shadow( 4px 0px 4px var(--glow))
  }
  12% {
    filter:
      invert(1)
      brightness(50%)
      sepia(100%)
      saturate(10000%)
      hue-rotate(var(--angle))
      drop-shadow( 3px 3px 4px var(--glow))
  }
  25% {
    filter:
      invert(1)
      brightness(50%)
      sepia(100%)
      saturate(10000%)
      hue-rotate(var(--angle))
      drop-shadow( 0px 4px 4px var(--glow))
  }
  37% {
    filter:
      invert(1)
      brightness(50%)
      sepia(100%)
      saturate(10000%)
      hue-rotate(var(--angle))
      drop-shadow(-3px 3px 4px var(--glow))
  }
  50% {
    filter:
      invert(1)
      brightness(50%)
      sepia(100%)
      saturate(10000%)
      hue-rotate(var(--angle))
      drop-shadow(-4px 0px 4px var(--glow))
  }
  62% {
    filter:
      invert(1)
      brightness(50%)
      sepia(100%)
      saturate(10000%)
      hue-rotate(var(--angle))
      drop-shadow(-3px -3px 4px var(--glow))
  }
  75% {
    filter:
      invert(1)
      brightness(50%)
      sepia(100%)
      saturate(10000%)
      hue-rotate(var(--angle))
      drop-shadow( 0px -4px 4px var(--glow))
  }
  87% {
      filter:
      invert(1)
      brightness(50%)
      sepia(100%)
      saturate(10000%)
      hue-rotate(var(--angle))
      drop-shadow( 3px -3px 4px var(--glow))
  }
  100% {
    filter:
      invert(1)
      brightness(50%)
      sepia(100%)
      saturate(10000%)
      hue-rotate(var(--angle))
      drop-shadow( 4px 0px 4px var(--glow))
  }
}