/* Board-only earned badges. The shared poster and team styles stay unchanged. */
.board-star-help { margin: -.35rem 0 1rem; color: var(--muted); font-size: .85rem; }
.board-stars { gap: 8px; padding-block: 4px; }
button.star {
  --badge-ink: #10385f;
  --badge-edge: #3f6b97;
  --badge-top: #eefbff;
  --badge-mid: #b6dcff;
  --badge-low: #7faee0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 58px;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid var(--badge-edge);
  border-bottom-width: 3px;
  border-radius: 7px;
  background:
    linear-gradient(130deg, transparent 22%, #ffffffd9 24%, #ffffff18 46%, transparent 48%),
    linear-gradient(165deg, var(--badge-top), var(--badge-mid) 52%, var(--badge-low));
  color: var(--badge-ink);
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 #ffffffb3, inset -1px -1px 0 #00000012, 0 2px 2px #173b2b1a;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #ffffffb3;
  transition: box-shadow 140ms, filter 140ms;
}
button.star[data-value='2'] {
  --badge-ink: #293a49;
  --badge-edge: #667b8b;
  --badge-top: #fff;
  --badge-mid: #e1e9f0;
  --badge-low: #afbecb;
}
button.star[data-value='3'] {
  --badge-ink: #513508;
  --badge-edge: #967127;
  --badge-top: #fff8ce;
  --badge-mid: #f8d477;
  --badge-low: #d6a340;
}
.star-symbol { width: 23px; height: 23px; flex: 0 0 23px; fill: currentColor; filter: drop-shadow(0 1px 0 #ffffffb3); }
button.star:hover:not(:disabled) { filter: brightness(1.06); box-shadow: inset 0 1px 0 #fff, 0 3px 7px #173b2b30; }
button.star:active:not(:disabled) { filter: brightness(.97); box-shadow: inset 0 2px 3px #183c2b30; }
button.star:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
.star-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 0; border: 2px solid var(--ink); box-shadow: 0 18px 70px #07150c66; }
.star-dialog::backdrop { background: #10241acc; }
.star-detail-header { padding: 1.5rem 1.5rem 1.25rem; background: var(--forest); color: #fff9e7; }
.star-detail-header .eyebrow { margin: 0 0 .7rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.star-detail-header .eyebrow::before { content: none; }
.star-detail-header h2 { margin: 0 0 .65rem; font-family: AlnurSans, sans-serif; font-size: clamp(1.65rem, 5vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; text-transform: none; overflow-wrap: anywhere; }
#star-detail-participant { margin: 0; color: #f1e7c9; font-size: .95rem; overflow-wrap: anywhere; }
.star-detail-body { padding: 1.4rem 1.5rem 1.5rem; }
.star-detail-facts { display: grid; gap: 1rem; margin: 0; }
.star-detail-facts > div { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.star-detail-facts dt { margin: 0 0 .3rem; color: var(--muted); font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.star-detail-facts dd { margin: 0; font-size: 1rem; font-weight: 750; }
#star-detail-points { color: var(--forest); font-family: QuestScore, sans-serif; font-size: 2.5rem; line-height: 1.1; }
#star-detail-prayers { margin: .8rem 0 0; font-weight: 700; }
.star-dialog form { margin-top: 1.25rem; }
.star-dialog .button { width: 100%; }
@media (max-width: 600px) { .board-star-help { font-size: .8rem; } }
/* A moving white sweep crosses the icon; four-point glints sparkle on the star.
   Staggered phases keep only one or two badges shining at a time. */
button.star { --shine-delay: 0s; }
button.star[data-shine='1'] { --shine-delay: -.6s; }
button.star[data-shine='2'] { --shine-delay: -1.2s; }
button.star[data-shine='3'] { --shine-delay: -1.8s; }
button.star[data-shine='4'] { --shine-delay: -2.4s; }
button.star[data-shine='5'] { --shine-delay: -3s; }
button.star[data-shine='6'] { --shine-delay: -3.6s; }
button.star[data-shine='7'] { --shine-delay: -4.2s; }
button.star[data-shine='8'] { --shine-delay: -4.8s; }
button.star[data-shine='9'] { --shine-delay: -5.4s; }
button.star[data-shine='10'] { --shine-delay: -6s; }
button.star::before {
  content: ''; position: absolute; inset: -30% auto -30% -65%; width: 45%;
  pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, #ffffffed 45%, #fff 52%, transparent);
  transform: translateX(0) skewX(-22deg); opacity: 0;
  animation: quest-star-sweep 6.6s ease-in-out infinite;
  animation-delay: var(--shine-delay);
}
button.star::after {
  content: ''; position: absolute; top: 3px; right: 4px; width: 12px; height: 12px;
  pointer-events: none; z-index: 3; background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0; transform: scale(.35);
  animation: quest-star-sparkle 6.6s ease-in-out infinite;
  animation-delay: var(--shine-delay);
}
.star-icon-glint {
  opacity: 0; transform-origin: 17px 7px;
  animation: quest-star-sparkle 6.6s ease-in-out infinite;
  animation-delay: var(--shine-delay);
}
@keyframes quest-star-sweep {
  0% { transform: translateX(0) skewX(-22deg); opacity: 0; }
  2% { opacity: .95; }
  14% { transform: translateX(420%) skewX(-22deg); opacity: .95; }
  16%, 100% { transform: translateX(420%) skewX(-22deg); opacity: 0; }
}
@keyframes quest-star-sparkle {
  0%, 3% { opacity: 0; transform: scale(.35); }
  8% { opacity: 1; transform: scale(1.2); }
  15%, 100% { opacity: 0; transform: scale(.35); }
}
@media (prefers-reduced-motion: reduce) {
  button.star { transition: none; }
  button.star::before, button.star::after, .star-icon-glint { animation: none; }
  .star-icon-glint { opacity: .65; transform: none; }
}