.ranking-flow {
  --camera-glow-red: #ff3b24;
  --camera-glow-coral: #ff8a72;
  --camera-glow-highlight: #fff1e6;
  --camera-glow-sky: #64a0ff;
  --camera-glow-blue: #0649b9;
}

.ranking-flow-card-pair-enter {
  animation: ranking-flow-card-pair-enter 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes ranking-flow-card-pair-enter {
  0% { transform: translateY(8px) scale(0.985); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@property --camera-confirmation-progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ranking-flow .camera-choice-card__frame,
.ranking-flow .camera-choice-card__hover-rim,
.ranking-flow .camera-choice-card__confirmation-rim {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  border: 3px solid transparent;
  border-radius: inherit;
  pointer-events: none;
}

.ranking-flow .camera-choice-card__frame { border-color: rgb(255 255 255 / 0.88); }

.ranking-flow .camera-choice-card__hover-rim {
  border: 0;
  opacity: var(--camera-glow-opacity);
  -webkit-mask-image: conic-gradient(from var(--camera-glow-angle) at center, #000 0 25%, transparent 40%, transparent 60%, #000 75%);
  mask-image: conic-gradient(from var(--camera-glow-angle) at center, #000 0 25%, transparent 40%, transparent 60%, #000 75%);
  transition: opacity 180ms var(--ease-out);
}

.ranking-flow .camera-choice-card__hover-rim-stroke,
.ranking-flow .camera-choice-card__confirmation-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ranking-flow .camera-choice-card__hover-rim-stroke {
  padding: 3px;
  background:
    radial-gradient(at 80% 55%, var(--camera-glow-red) 0, transparent 50%),
    radial-gradient(at 69% 34%, var(--camera-glow-coral) 0, transparent 50%),
    radial-gradient(at 8% 6%, var(--camera-glow-blue) 0, transparent 50%),
    radial-gradient(at 41% 38%, var(--camera-glow-sky) 0, transparent 50%),
    radial-gradient(at 86% 85%, var(--camera-glow-highlight) 0, transparent 50%),
    radial-gradient(at 82% 18%, var(--camera-glow-coral) 0, transparent 50%),
    linear-gradient(var(--camera-glow-red) 0 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ranking-flow .camera-choice-card__confirmation-rim {
  z-index: 2;
  border: 0;
  --camera-confirmation-progress: 0deg;
  -webkit-mask-image: conic-gradient(from -135deg at center, #000 0deg var(--camera-confirmation-progress), transparent var(--camera-confirmation-progress) 360deg);
  mask-image: conic-gradient(from -135deg at center, #000 0deg var(--camera-confirmation-progress), transparent var(--camera-confirmation-progress) 360deg);
}

.ranking-flow .camera-choice-card__confirmation-rim--holding {
  animation: ranking-flow-camera-confirmation-rim-trace var(--camera-confirmation-duration) linear forwards;
}

.ranking-flow .camera-choice-card__confirmation-rim--confirmed,
.ranking-flow .camera-choice-card__confirmation-rim--reduced { --camera-confirmation-progress: 360deg; }

.ranking-flow .camera-choice-card__confirmation-rim-stroke {
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(from -135deg, var(--camera-glow-red), var(--camera-glow-coral) 18%, var(--camera-glow-highlight) 38%, var(--camera-glow-sky) 60%, var(--camera-glow-blue) 78%, var(--camera-glow-red));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes ranking-flow-camera-confirmation-rim-trace { to { --camera-confirmation-progress: 360deg; } }

.ranking-flow .camera-choice-card {
  --camera-card-surface: rgb(217 217 217 / 0.52);
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 16px;
  background: var(--camera-card-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.52), 0 8px 24px rgb(18 24 32 / 0.16);
  color: #171719;
  cursor: pointer;
  container-type: inline-size;
  -webkit-backdrop-filter: blur(8px) saturate(1.06);
  backdrop-filter: blur(8px) saturate(1.06);
  transition: opacity 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.ranking-flow .camera-choice-card:disabled { cursor: default; }
.ranking-flow .camera-choice-card--active { --camera-card-surface: rgb(226 226 226 / 0.6); }

.ranking-flow .camera-choice-card__label {
  position: relative;
  z-index: 3;
  display: -webkit-box;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  max-height: min(100%, calc(2.85em + 20px));
  overflow: hidden;
  padding: 10px;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(13px, 15cqw, 23px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-align: center;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.ranking-flow .camera-choice-card--compact .camera-choice-card__label {
  font-size: clamp(12px, 14cqw, 19px);
  max-height: min(100%, calc(1.9em + 20px));
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ranking-flow .camera-choice-card--pill .camera-choice-card__label {
  display: block;
  max-width: 100%;
  max-height: 100%;
  padding: 6px 10px;
  font-size: clamp(11px, 13cqw, 18px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-flow .camera-preference-stage { scroll-margin-top: calc(78px + env(safe-area-inset-top)); }

.ranking-flow .duel-choice-spark {
  position: absolute;
  top: var(--duel-spark-y);
  left: var(--duel-spark-x);
  z-index: 4;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ranking-flow .duel-choice-spark > i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand-red);
  box-shadow: 0 0 5px rgb(255 59 36 / 0.45);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  animation: ranking-flow-duel-choice-spark 270ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.ranking-flow .duel-choice-spark > i:nth-child(2),
.ranking-flow .duel-choice-spark > i:nth-child(4),
.ranking-flow .duel-choice-spark > i:nth-child(6) {
  background: rgb(229 234 237);
  box-shadow: 0 0 5px rgb(229 234 237 / 0.7);
}

.ranking-flow .duel-choice-spark > i:nth-child(1) { --duel-spark-tx: 26px; --duel-spark-ty: -20px; }
.ranking-flow .duel-choice-spark > i:nth-child(2) { --duel-spark-tx: 4px; --duel-spark-ty: -31px; }
.ranking-flow .duel-choice-spark > i:nth-child(3) { --duel-spark-tx: -24px; --duel-spark-ty: -17px; }
.ranking-flow .duel-choice-spark > i:nth-child(4) { --duel-spark-tx: -25px; --duel-spark-ty: 18px; }
.ranking-flow .duel-choice-spark > i:nth-child(5) { --duel-spark-tx: 1px; --duel-spark-ty: 30px; }
.ranking-flow .duel-choice-spark > i:nth-child(6) { --duel-spark-tx: 25px; --duel-spark-ty: 16px; }

@keyframes ranking-flow-duel-choice-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--duel-spark-tx)), calc(-50% + var(--duel-spark-ty))) scale(0.65); }
}

@media (prefers-reduced-motion: no-preference) {
  .ranking-flow .duel-choice-card[data-duel-result="winner"] {
    animation: ranking-flow-duel-choice-winner 180ms var(--ease-out) both;
    border-color: var(--brand-red);
  }

  .ranking-flow .duel-choice-card[data-duel-result="loser"] { animation: ranking-flow-duel-choice-loser 180ms var(--ease-out) both; }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-flow .camera-choice-card__confirmation-rim--holding {
    animation: none;
    --camera-confirmation-progress: 360deg;
  }

  .ranking-flow .duel-choice-spark { display: none; }
}

@keyframes ranking-flow-duel-choice-winner {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.15); transform: translateY(-10px) scale(1.045); }
  100% { filter: brightness(1.04); transform: translateY(-8px) scale(1.035); }
}

@keyframes ranking-flow-duel-choice-loser {
  0% { filter: saturate(1); }
  100% { filter: saturate(0.45); opacity: 0.52; transform: translateY(8px) scale(0.95); }
}