.rating-stars{
  color:#ffd54f;
  letter-spacing:1px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.game-rating-summary{
  display:flex;
  align-items:center;
  gap:14px;
  margin:12px 0;
}

.rating-average{
  font-size:2.5rem;
  font-weight:900;
  color:var(--tg-text);
}

.game-rating-compact{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}

.star-rating-fieldset{
  border:0;
  padding:0;
  margin:12px 0 18px;
}

.star-rating-fieldset legend{
  color:var(--tg-text);
  font-weight:750;
  margin-bottom:6px;
}

.interactive-star-rating{
  display:inline-flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:4px;
}

.interactive-star-rating input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.interactive-star-rating label{
  margin:0;
  color:#5d6873;
  font-size:2.4rem;
  line-height:1;
  cursor:pointer;
  transition:transform .12s ease,color .12s ease;
}

.interactive-star-rating label:hover,
.interactive-star-rating label:hover ~ label,
.interactive-star-rating input:checked ~ label{
  color:#ffd54f;
}

.interactive-star-rating label:hover{
  transform:scale(1.12);
}

.interactive-star-rating input:focus-visible + label{
  outline:3px solid var(--tg-primary);
  outline-offset:3px;
  border-radius:4px;
}

.rating-review{
  padding:16px 0;
  border-bottom:1px solid var(--tg-border-soft);
}

.rating-review:last-child{
  border-bottom:0;
}

.rating-review-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

@media(max-width:560px){
  .rating-review-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .interactive-star-rating label{
    font-size:2rem;
  }
}