/* ==========================================================================
   beebso-stars.css
   Styling for the level 1 star row.

   Three states per star:
     empty  grey outline colour, nothing earned yet
     pale   first mic attempt landed
     full   second mic attempt landed, star complete

   Five stars fit comfortably on one line even on a small phone, so they can
   be drawn large enough for a four-year-old to read at a glance.
   No drop shadows. Drawn SVG, no emojis.
   ========================================================================== */

:root {
  --bs-star-empty: #E4E1D8;  /* not attempted */
  --bs-star-pale:  #FFE6A3;  /* one attempt */
  --bs-star-full:  #FFC12E;  /* two attempts, done */
  --bs-star-size:  44px;
  --bs-star-gap:   8px;
}

.bs-stars {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--bs-star-gap);
  margin: 0 auto;
}

.bs-star {
  width: var(--bs-star-size);
  height: var(--bs-star-size);
  flex: 0 0 auto;
  fill: var(--bs-star-empty);
  transition: fill 200ms ease-out;
}

.bs-star--pale {
  fill: var(--bs-star-pale);
}

.bs-star--full {
  fill: var(--bs-star-full);
}

/* The word is finished. A quiet marker, not a party — the party is the
   Dinaurpion unlock that this completion triggers. */
.bs-stars--full {
  border: 3px solid var(--bs-star-full);
  border-radius: 26px;
  padding: 6px 12px;
}

@media (max-width: 480px) {
  :root {
    --bs-star-size: 36px;
    --bs-star-gap:  6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bs-star { transition: none; }
}