/* V32 live hotfix: keep the clip-submission Premier slider visible before interaction. */
.submit-rating input[type="range"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:block!important;
  width:100%!important;
  height:8px!important;
  min-height:8px!important;
  margin:14px 0!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:999px!important;
  opacity:1!important;
  visibility:visible!important;
  background:linear-gradient(90deg,#a4adb4 0 14.28%,#5ac8e6 14.28% 28.56%,#4c83ed 28.56% 42.84%,#9f63e8 42.84% 57.12%,#ec62ac 57.12% 71.4%,#ed4245 71.4% 85.68%,#f6c945 85.68% 100%)!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.18)!important;
  cursor:pointer!important;
}
.submit-rating input[type="range"]::-webkit-slider-runnable-track{
  height:8px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#a4adb4 0 14.28%,#5ac8e6 14.28% 28.56%,#4c83ed 28.56% 42.84%,#9f63e8 42.84% 57.12%,#ec62ac 57.12% 71.4%,#ed4245 71.4% 85.68%,#f6c945 85.68% 100%)!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55)!important;
}
.submit-rating input[type="range"]::-moz-range-track{
  height:8px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#a4adb4 0 14.28%,#5ac8e6 14.28% 28.56%,#4c83ed 28.56% 42.84%,#9f63e8 42.84% 57.12%,#ec62ac 57.12% 71.4%,#ed4245 71.4% 85.68%,#f6c945 85.68% 100%)!important;
}
.submit-rating input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:18px!important;
  height:24px!important;
  margin-top:-8px!important;
  border:2px solid #fff!important;
  border-radius:5px!important;
  background:var(--rating-color,#f6c945)!important;
  box-shadow:0 2px 8px #000b,0 0 0 2px rgba(0,0,0,.35)!important;
}
.submit-rating input[type="range"]::-moz-range-thumb{
  width:18px!important;
  height:24px!important;
  border:2px solid #fff!important;
  border-radius:5px!important;
  background:var(--rating-color,#f6c945)!important;
  box-shadow:0 2px 8px #000b,0 0 0 2px rgba(0,0,0,.35)!important;
}
.submit-rating input[type="range"]:focus-visible{
  outline:2px solid var(--rating-color,#f6c945)!important;
  outline-offset:5px!important;
}

/* V32 case compatibility: keep the reel on one compositor layer and avoid expensive
   backdrop-filter repaints that can flicker on managed/low-end Chromium devices. */
.case-spin-backdrop,.case-reveal-backdrop,.case-preview-backdrop{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.case-spinner-track{
  will-change:transform;
}

/* Some managed Windows builds expose prefers-reduced-motion even when the CSGuessr
   account setting is off. Keep the case reel functional in that situation. The in-site
   Reduced motion setting still wins and intentionally skips the reel animation. */
@media (prefers-reduced-motion:reduce){
  .site-shell:not(.setting-reduced) .case-spinner-track{
    animation-duration:3.85s!important;
    animation-iteration-count:1!important;
  }
  .site-shell:not(.setting-reduced) .stacked-spinner-row .case-spinner-track{
    animation-delay:var(--row-delay)!important;
  }
}