/* Piqelo v814 — premium Winner's Spotlight score medallion.
   Presentation only: the existing --score value and score interaction stay canonical. */

#topPickPanel #scoreRing{
  --score-track:rgba(96,145,169,.22);
  box-sizing:border-box!important;
  inline-size:92px!important;
  block-size:92px!important;
  min-inline-size:92px!important;
  min-block-size:92px!important;
  max-inline-size:92px!important;
  max-block-size:92px!important;
  display:grid!important;
  place-items:center!important;
  align-self:start!important;
  flex:0 0 92px!important;
  aspect-ratio:1 / 1;
  margin:3px 0 28px!important;
  padding:0!important;
  overflow:visible!important;
  isolation:isolate;
  border:1px solid rgba(133,220,237,.28)!important;
  border-radius:50%!important;
  background:conic-gradient(
    from -90deg,
    #7fdcff 0%,
    #58e7ce var(--score),
    var(--score-track) var(--score),
    var(--score-track) 100%
  )!important;
  box-shadow:
    0 0 0 6px rgba(45,119,151,.10),
    0 16px 30px rgba(0,11,22,.26),
    0 0 26px rgba(74,226,202,.10)!important;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease;
}

#topPickPanel #scoreRing::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:8px!important;
  inset-inline-start:8px!important;
  inset-block-end:8px!important;
  inline-size:auto!important;
  block-size:auto!important;
  padding:0!important;
  border:1px solid rgba(115,190,215,.20)!important;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 24%,rgba(56,141,171,.18),transparent 54%),
    linear-gradient(145deg,#0a2235 0%,#061521 72%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -12px 24px rgba(0,8,16,.22);
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  pointer-events:none;
}

#topPickPanel #scoreRing::before{
  content:none!important;
  display:none!important;
}

#topPickPanel #scoreRing .rtRingLabel{
  position:absolute;
  z-index:2;
  inset:calc(100% + 10px) auto auto 50%!important;
  inline-size:max-content!important;
  transform:translateX(-50%)!important;
  color:#9fc7d7!important;
  font:900 10px/1.1 Inter,ui-sans-serif,system-ui,sans-serif!important;
  letter-spacing:.105em!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
  pointer-events:none;
}

#topPickPanel #scoreRing strong{
  position:relative;
  z-index:1;
  display:block;
  color:#f7fdff!important;
  font-size:32px!important;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.045em;
  line-height:1!important;
  text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}

#topPickPanel #scoreRing:hover{
  border-color:rgba(134,235,225,.48)!important;
  box-shadow:
    0 0 0 6px rgba(45,119,151,.13),
    0 18px 34px rgba(0,11,22,.30),
    0 0 30px rgba(74,226,202,.16)!important;
}

#topPickPanel #scoreRing:focus-visible{
  outline:3px solid rgba(101,226,236,.72)!important;
  outline-offset:5px!important;
}

#topPickPanel::before{
  border:1px solid rgba(205,247,243,.48)!important;
  background:linear-gradient(96deg,#8ddcff 0%,#71eddd 54%,#b8f9c9 100%)!important;
  box-shadow:0 9px 22px rgba(18,173,221,.20)!important;
}

@media(max-width:780px){
  #topPickPanel .topPickLeft{
    grid-template-columns:72px minmax(0,1fr)!important;
    column-gap:14px!important;
  }

  #topPickPanel #scoreRing{
    inline-size:72px!important;
    block-size:72px!important;
    min-inline-size:72px!important;
    min-block-size:72px!important;
    max-inline-size:72px!important;
    max-block-size:72px!important;
    flex-basis:72px!important;
    margin-block-start:1px!important;
    margin-block-end:25px!important;
    box-shadow:
      0 0 0 5px rgba(45,119,151,.10),
      0 12px 24px rgba(0,11,22,.25),
      0 0 22px rgba(74,226,202,.09)!important;
  }

  #topPickPanel #scoreRing::after{inset:6px!important}
  #topPickPanel #scoreRing .rtRingLabel{
    inset-block-start:calc(100% + 8px)!important;
    font-size:9px!important;
    letter-spacing:.085em!important;
  }
  #topPickPanel #scoreRing strong{font-size:26px!important}
}

@media(max-width:380px){
  #topPickPanel .topPickLeft{
    grid-template-columns:68px minmax(0,1fr)!important;
    column-gap:12px!important;
  }
  #topPickPanel #scoreRing{
    inline-size:68px!important;
    block-size:68px!important;
    min-inline-size:68px!important;
    min-block-size:68px!important;
    max-inline-size:68px!important;
    max-block-size:68px!important;
    flex-basis:68px!important;
  }
  #topPickPanel #scoreRing strong{font-size:25px!important}
}

@media(prefers-reduced-motion:reduce){
  #topPickPanel #scoreRing{transition:none}
}