/*
 * SUPERSEAL'S LOOPER REELS
 * Corner button graphics + Crates rating polish
 */


/* ==================================================
   NEW GRAPHIC CORNER BUTTONS
   ================================================== */

.v7-corner-graphic-control {
  appearance: none !important;
  -webkit-appearance: none !important;

  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  width: 96px !important;
  height: 96px !important;

  overflow: visible !important;

  /*
   * Raise both controls by 15% of their own height
   * without disturbing their existing corner anchors.
   */
  translate: 0 -30% !important;
}


.v7-corner-graphic-control img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;

  pointer-events: none !important;

  user-select: none !important;
  -webkit-user-drag: none !important;
}


.v7-corner-graphic-control:hover img {
  transform: scale(1.04);

  filter:
    brightness(1.08)
    drop-shadow(
      0 0 7px
      rgba(255, 205, 0, .55)
    );
}


.v7-corner-graphic-control:active img {
  transform: scale(.97);
}


/* ==================================================
   CRATES FIVE-STAR CONTROL
   ================================================== */

.crate-personal-rating.crate-rating-stars {
  display: flex !important;

  align-items: center !important;

  gap: 5px !important;

  min-height: 25px !important;

  margin-top: 4px !important;

  overflow: visible !important;
}


.crate-rating-star {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  color:
    rgba(71, 255, 101, .30) !important;

  font-size: 19px !important;
  line-height: 1 !important;

  cursor: pointer !important;

  opacity: 1 !important;

  transition:
    transform .08s ease,
    color .08s ease,
    text-shadow .08s ease !important;
}


.crate-rating-star.is-rated {
  color: #54ff6c !important;

  text-shadow:
    0 0 5px
    rgba(75, 255, 100, .9) !important;
}


.crate-rating-star:hover,
.crate-rating-star:focus-visible {
  color: #b3ffbd !important;

  transform: scale(1.25) !important;

  text-shadow:
    0 0 8px
    rgba(85, 255, 110, 1) !important;
}


.crate-rating-star:focus-visible {
  outline:
    1px solid
    #54ff6c !important;

  outline-offset:
    2px !important;
}


/*
 * Fallback improvement if an older crate renderer
 * still emits a simple text rating.
 */

.crate-personal-rating:not(.crate-rating-stars) {
  font-size: 17px !important;

  letter-spacing: 4px !important;

  color: #54ff6c !important;

  line-height: 1.2 !important;
}