/* Approved "Shining star": the concept's 2.8s glint and six 3.2s embers. */
.star-resource {
  --star-size: 24px;
  position: relative;
  display: inline-flex;
  width: var(--star-size);
  height: var(--star-size);
  flex: none;
  vertical-align: middle;
  isolation: isolate;
  pointer-events: none;
}
.star-resource img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.star-resource::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd78645, transparent 70%);
  animation: resource-star-halo 5s ease-in-out infinite;
}
.star-resource::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 40%, #fff5d7cc 49%, transparent 58%);
  background-size: 320% 100%;
  background-position: 140% 0;
  mask: url('/assets/star-resource/shining-v1.webp') center / contain no-repeat;
  animation: resource-star-glint 2.8s ease-in-out -.5s infinite;
}
.star-resource-spark {
  position: absolute;
  left: var(--spark-x);
  top: var(--spark-y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff5d7;
  box-shadow: 0 0 3px #fff2c7, 0 0 8px #ffd685;
  animation: resource-star-spark 3.2s linear var(--spark-delay) infinite;
  z-index: 3;
}
.star-amount { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.star-resource-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.account-stars > .star-resource { --star-size: 28px; }
.stars-balance .star-resource { --star-size: 40px; }
.space-section-heading > .star-resource { margin-top: 5px; }
@keyframes resource-star-halo { 0%,100% { opacity: .25; transform: scale(.92); } 50% { opacity: .8; transform: scale(1.08); } }
@keyframes resource-star-glint { 0% { background-position: 140% 0; opacity: 0; } 7%,40% { opacity: .95; } 55%,100% { background-position: -40% 0; opacity: 0; } }
@keyframes resource-star-spark { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 12%,45% { opacity: 1; } 85%,100% { opacity: 0; transform: translate(calc(var(--star-size) * var(--spark-dx)),calc(var(--star-size) * var(--spark-dy))) scale(.35); } }
.star-resource[data-star-visible=false]::before,
.star-resource[data-star-visible=false]::after,
.star-resource[data-star-visible=false] .star-resource-spark,
:root[data-background-paused=true] .star-resource::before,
:root[data-background-paused=true] .star-resource::after,
:root[data-background-paused=true] .star-resource-spark { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .star-resource::before, .star-resource::after, .star-resource-spark { animation: none; }
  .star-resource::after, .star-resource-spark { display: none; }
}