.star{appearance:none;width:32px;height:32px;color:var(--muted);cursor:pointer;transition:opacity .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);background:0 0;border:0;border-radius:50%;place-items:center;margin:0;padding:0;display:grid}.star svg{fill:#0000;stroke:currentColor;stroke-width:1.7px;stroke-linejoin:round;width:17px;height:17px;transition:fill .2s var(--ease)}@media (hover:hover) and (pointer:fine){.star:hover{color:var(--fg);background:var(--pill)}}.star:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent);outline-offset:1px}.star[aria-pressed=true]{color:var(--star)}.star[aria-pressed=true] svg{fill:currentColor}.star:active{transform:scale(.88)}.star-pop{position:relative}.star-pop svg{animation:star-pop .52s var(--spring)}.star-pop:after{content:"";box-shadow:0 0 0 0 color-mix(in srgb, var(--star) 60%, transparent);animation:star-ring .56s var(--ease) forwards;pointer-events:none;border-radius:50%;position:absolute;inset:4px}@keyframes star-pop{0%{transform:scale(.6)rotate(-20deg)}60%{transform:scale(1.3)rotate(8deg)}to{transform:none}}@keyframes star-ring{to{box-shadow:0 0 0 12px color-mix(in srgb, var(--star) 0%, transparent)}}.game-list>li>.star{opacity:.35;margin-top:-16px;position:absolute;top:50%;right:6px}.game-list>li>.star[aria-pressed=true],.game-list>li>.star:focus-visible{opacity:1}@media (hover:hover) and (pointer:fine){.game-list>li:hover>.star{opacity:1}}@media (hover:none){.game-list>li>.star{opacity:.6}}@media (prefers-reduced-motion:reduce){.star-pop svg,.star-pop:after{animation:none}}