body {
    margin: 0;
    /* #FFF884, Lavender,LemonChiffon, Orange, Coral, LightSalmon, MistyRose, Pink, LavenderBlush, OldLace */
    background: #FFFF88;
}

#toolbar {
    position: sticky;
    top: 0;
    background: #FFFF88;
    z-index: 1000;
    text-align: center;
}

/* Short words-page demonstration: draw attention without moving the grid. */
#letters button.demo-flicker {
    opacity: 0.28;
}


/* Child's turn: a faster flicker while Kru Myloo is listening. */
@keyframes practice-listening-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.22; }
}

#letters button.practice-listening {
    animation: practice-listening-flicker 0.34s linear infinite;
}

@keyframes reward-card-flip {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(90deg) scale(1.05); }
  100% { transform: rotateY(0deg) scale(1); }
}
#letters button.reward-flip { animation: reward-card-flip .6s ease-in-out; }
#letters button.reward-complete,
#letters button.reward-complete:disabled { opacity: 1; cursor: default; }
#letters button {
  position: relative;
  transform-style: preserve-3d;
  perspective: 700px;
}
#letters button .reward-image-hidden { visibility: hidden; }
#letters button .reward-symbol {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(2.2rem, 10vw, 6rem);
  line-height: 1;
  pointer-events: none;
}