/* Spell It */
.si-pic {
  border: 0; background: var(--card); border-radius: 28px; box-shadow: 0 4px 0 var(--line);
  width: 150px; height: 150px; font-size: 92px; line-height: 150px; padding: 0;
}

.si-slots { display: flex; gap: 6px; justify-content: center; padding: 4px 0; }
.si-slot {
  width: 46px; height: 56px; border-bottom: 5px solid var(--muted);
  display: grid; place-items: end center; padding-bottom: 2px;
  font: 800 2rem/1 var(--round); text-transform: lowercase;
}
.si-slot.full { border-color: var(--green); color: var(--green); }
.si-slots.long { gap: 4px; }
.si-slots.long .si-slot { width: 34px; font-size: 1.6rem; }
.si-slots.done .si-slot { animation: lb-bounce .5s; }
.si-slots.done .si-slot:nth-child(2n) { animation-delay: .08s; }

.si-tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 380px; margin-top: 6px; }
.si-tile {
  width: 60px; height: 60px; border: 0; border-radius: 16px; padding: 0;
  background: var(--card); box-shadow: 0 4px 0 var(--line); font: 800 1.8rem var(--round);
}
.si-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.si-tile:disabled { opacity: 0.25; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .si-slots.done .si-slot { animation: none; } }