/**
 * Piston rating tiers: square/button gradients + PNG piston (filters for inactive / active).
 */

.rating-piston-img {
  display: block;
  flex-shrink: 0;
  margin: 0 auto;
  object-fit: contain;
  transition: opacity 0.2s ease, transform 0.24s ease, filter 0.2s ease;
}

.rating-icon-wrap .rating-piston-img {
  width: 30px;
  height: 30px;
  max-width: 100%;
  max-height: 100%;
}

.card-rating-piston .rating-piston-img {
  width: 18px;
  height: 18px;
}

/* Inactive — dim grey piston */
.rating-btn:not(.is-active) .rating-piston-img,
.card-rating-piston:not(.is-on) .rating-piston-img {
  opacity: 0.58;
  filter: grayscale(1) brightness(0.75);
}

/*
 * Active pistons — tier tint on the PNG (sepia/saturate/hue/brightness + depth).
 * Inactive pistons keep the grayscale rule above.
 */
.rating-pistons[data-piston-tier="1"] .rating-btn.is-active .rating-piston-img,
.card-rating-pistons[data-piston-tier="1"] .card-rating-piston.is-on .rating-piston-img {
  opacity: 1;
  filter: sepia(0.85) saturate(4) hue-rotate(318deg) brightness(0.94) contrast(1.08)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.rating-pistons[data-piston-tier="2"] .rating-btn.is-active .rating-piston-img,
.card-rating-pistons[data-piston-tier="2"] .card-rating-piston.is-on .rating-piston-img {
  opacity: 1;
  filter: sepia(0.55) saturate(2.1) hue-rotate(12deg) brightness(0.93) contrast(1.06)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.rating-pistons[data-piston-tier="3"] .rating-btn.is-active .rating-piston-img,
.card-rating-pistons[data-piston-tier="3"] .card-rating-piston.is-on .rating-piston-img {
  opacity: 1;
  filter: grayscale(0.35) brightness(1.12) contrast(0.96) saturate(0.45)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.32));
}

.rating-pistons[data-piston-tier="4"] .rating-btn.is-active .rating-piston-img,
.card-rating-pistons[data-piston-tier="4"] .card-rating-piston.is-on .rating-piston-img {
  opacity: 1;
  filter: sepia(0.5) saturate(2.4) hue-rotate(8deg) brightness(1.06) contrast(1.05)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.rating-pistons[data-piston-tier="5"] .rating-btn.is-active .rating-piston-img,
.card-rating-pistons[data-piston-tier="5"] .card-rating-piston.is-on .rating-piston-img {
  opacity: 1;
  filter: brightness(1.08) saturate(0.72) hue-rotate(198deg) contrast(1.06)
    drop-shadow(0 1px 3px rgba(190, 220, 255, 0.55));
}

/* Tier 5 — platinum (square) */
.rating-pistons[data-piston-tier="5"] .rating-btn.is-active,
.card-rating-pistons[data-piston-tier="5"] .card-rating-piston.is-on {
  background: linear-gradient(
    165deg,
    rgba(240, 248, 255, 0.42) 0%,
    rgba(175, 210, 245, 0.28) 45%,
    rgba(95, 140, 195, 0.22) 100%
  );
  border-color: rgba(205, 228, 255, 0.62);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.45),
    inset 0 -1px 2px rgba(40, 70, 110, 0.35),
    0 1px 3px rgba(30, 55, 90, 0.45);
}

/* Tier 4 — gold */
.rating-pistons[data-piston-tier="4"] .rating-btn.is-active,
.card-rating-pistons[data-piston-tier="4"] .card-rating-piston.is-on {
  background: linear-gradient(
    180deg,
    rgba(235, 205, 115, 0.38) 0%,
    rgba(130, 95, 40, 0.26) 100%
  );
  border-color: rgba(215, 175, 85, 0.62);
  box-shadow:
    inset 0 1px 2px rgba(255, 248, 220, 0.35),
    inset 0 -1px 2px rgba(60, 45, 15, 0.4),
    0 1px 3px rgba(40, 30, 10, 0.5);
}

/* Tier 3 — silver */
.rating-pistons[data-piston-tier="3"] .rating-btn.is-active,
.card-rating-pistons[data-piston-tier="3"] .card-rating-piston.is-on {
  background: linear-gradient(
    180deg,
    rgba(210, 218, 228, 0.4) 0%,
    rgba(105, 115, 130, 0.28) 100%
  );
  border-color: rgba(185, 195, 210, 0.58);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.28),
    inset 0 -1px 2px rgba(25, 30, 40, 0.35),
    0 1px 3px rgba(20, 25, 35, 0.45);
}

/* Tier 2 — bronze */
.rating-pistons[data-piston-tier="2"] .rating-btn.is-active,
.card-rating-pistons[data-piston-tier="2"] .card-rating-piston.is-on {
  background: linear-gradient(
    180deg,
    rgba(195, 140, 88, 0.4) 0%,
    rgba(95, 58, 32, 0.32) 100%
  );
  border-color: rgba(185, 125, 72, 0.62);
  box-shadow:
    inset 0 1px 2px rgba(255, 215, 175, 0.22),
    inset 0 -1px 2px rgba(40, 22, 12, 0.45),
    0 1px 3px rgba(35, 22, 12, 0.48);
}

/* Tier 1 — red */
.rating-pistons[data-piston-tier="1"] .rating-btn.is-active,
.card-rating-pistons[data-piston-tier="1"] .card-rating-piston.is-on {
  background: linear-gradient(
    180deg,
    rgba(225, 85, 85, 0.38) 0%,
    rgba(105, 28, 28, 0.34) 100%
  );
  border-color: rgba(210, 95, 95, 0.68);
  box-shadow:
    inset 0 1px 2px rgba(255, 180, 180, 0.25),
    inset 0 -1px 2px rgba(45, 12, 12, 0.5),
    0 1px 3px rgba(40, 12, 12, 0.5);
}