/*
 * Current-leader presentation layer.
 * Loaded after the existing theme and TV styles so ranking logic stays untouched.
 */

/* PC and TV keep the existing top-11 layout.
 * The list starts at rank 4, so its first eight rows are ranks 4 through 11.
 */
@media (min-width: 721px) {
  #rankingList .ranking-row:nth-child(n + 9) {
    display: none;
  }
}

.podium-card.first {
  isolation: isolate;
  padding-top: clamp(44px, 3vw, 58px);
  padding-bottom: clamp(38px, 3vw, 52px);
  animation: leader-aura 12s ease-in-out infinite;
}
.podium-card.first::before {
  transform-origin: 50% 50%;
  animation: leader-darts-float 4.2s ease-in-out infinite;
  top: calc(50% - 8px);
}

.leader-badge {
  position: absolute !important;
  z-index: 5 !important;
  top: clamp(11px, 0.8vw, 15px);
  left: 50%;
  margin: 0;
  padding: clamp(5px, 0.38vw, 7px) clamp(9px, 0.75vw, 14px);
  border: 1px solid rgba(255, 220, 126, 0.62);
  border-radius: 999px;
  background: rgba(32, 19, 6, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 20px rgba(255, 208, 90, 0.16);
  color: #ffe6a3;
  font-size: clamp(9px, 0.62vw, 12px);
  font-weight: 900;
  letter-spacing: 0.17em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.leader-footer {
  position: absolute !important;
  z-index: 5 !important;
  bottom: clamp(11px, 0.85vw, 16px);
  left: clamp(16px, 1.7vw, 28px);
  right: clamp(16px, 1.7vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  gap: 10px;
  font-size: clamp(9px, 0.68vw, 13px);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
}

.leader-reward-row {
  position: absolute !important;
  z-index: 5 !important;
  bottom: clamp(38px, 3.15vw, 54px);
  left: clamp(16px, 1.7vw, 28px);
  right: clamp(16px, 1.7vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  gap: clamp(8px, 0.65vw, 13px);
  color: #ffe6a3;
  font-size: clamp(9px, 0.68vw, 13px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.leader-reward-badge {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(255, 220, 126, 0.42);
  border-radius: 999px;
  background: rgba(32, 19, 6, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 14px rgba(255, 208, 90, 0.1);
}

.leader-reward-badge {
  flex: 0 1 auto;
  justify-content: center;
  padding: clamp(6px, 0.48vw, 9px) clamp(10px, 0.78vw, 15px);
  overflow: hidden;
  text-overflow: ellipsis;
    transform: translate(-3px,0);
}

.leader-reward-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(14px, 1vw, 19px);
  height: clamp(14px, 1vw, 19px);
  margin-right: clamp(5px, 0.4vw, 8px);
  line-height: 1;
  transform: translate(0px, 0px);
  font-size: clamp(14px, 1vw, 19px);
}

.leader-reward-text {
  display: inline-block;
  transform: translateY(1px);
}

.leader-reward-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.leader-countdown {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #ffffff;
  font-size: 1em;
    /* 位置の微調整を追加 */
  transform: translate(-6px, 3px);
  letter-spacing: 0.11em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
}

.leader-challenge {
  color: #fff1c8;
  text-shadow: 0 0 14px rgba(255, 214, 104, 0.26);
  transform: translate(6px, 0);
}

.leader-gap {
  padding: 5px 8px;
  border: 1px solid rgba(255, 213, 106, 0.3);
  border-radius: 999px;
  background: rgba(255, 213, 106, 0.09);
  color: #ffd76e;
  letter-spacing: 0.09em;
}

.leader-spotlight,
.leader-sheen {
  position: absolute !important;
  pointer-events: none;
}

.leader-spotlight {
  z-index: 0 !important;
  top: -65%;
  left: 8%;
  width: 84%;
  height: 210%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 223, 133, 0.17) 0%,
    rgba(255, 208, 90, 0.045) 40%,
    transparent 70%
  );
  animation: leader-spotlight 5.5s ease-in-out infinite;
}

.leader-sheen {
  z-index: 4 !important;
  top: -65%;
  left: -55%;
  width: 28%;
  height: 230%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 248, 211, 0.3),
    transparent
  );
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(17deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: leader-sheen 6s linear infinite;
}

.podium-card.first .podium-rank::before {
  transform-origin: 50% 85%;
  animation: leader-crown 3.4s ease-in-out infinite;
}


@keyframes reward-ready-glow {
  0%,
  100% {
    border-color: rgba(255, 220, 126, 0.7);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 12px rgba(255, 211, 96, 0.05),
      0 0 12px rgba(255, 208, 90, 0.14),
      0 0 20px rgba(255, 99, 246, 0.04);
  }

  50% {
    border-color: rgba(255, 238, 176, 0.94);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 0 14px rgba(255, 211, 96, 0.08),
      0 0 18px rgba(255, 208, 90, 0.24),
      0 0 26px rgba(255, 99, 246, 0.07);
  }
}

@keyframes reward-gift-pulse {
  0%,
  100% {
    transform: translateY(-1px) scale(1);
  }

  50% {
    transform: translateY(-1px) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .leader-reward-badge,
  .leader-reward-icon {
    animation: none;
  }
}

@keyframes leader-aura {
  0%,
  12%,
  100% {
    border-color: rgba(255, 208, 90, 0.58);
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.38),
      0 0 30px rgba(255, 208, 90, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);
  }

  5% {
    border-color: rgba(255, 225, 142, 0.76);
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.38),
      0 0 38px rgba(255, 208, 90, 0.18),
      inset 0 0 18px rgba(255, 216, 113, 0.055);
  }
}

@keyframes leader-sheen {
  /* Keep the reset invisible, then cross the card in about 1.4 seconds. */
  0%,
  62% {
    transform: translate3d(0, 0, 0) rotate(17deg);
    opacity: 0;
  }

  65% {
    transform: translate3d(85%, 0, 0) rotate(17deg);
    opacity: 0.3;
  }

  80% {
    transform: translate3d(510%, 0, 0) rotate(17deg);
    opacity: 0.3;
  }

  85%,
  100% {
    transform: translate3d(650%, 0, 0) rotate(17deg);
    opacity: 0;
  }
}

@keyframes leader-spotlight {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes leader-crown {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-3px) rotate(1deg);
  }
}

@keyframes leader-darts-float {
  0%,
  100% {
    transform: translateY(-50%) rotate(-0.25deg);
  }

  50% {
    transform: translateY(calc(-50% - 5px)) rotate(0.25deg);
  }
}

@media (min-width: 800px) and (min-aspect-ratio: 8 / 5) {
  .podium-card.first {
    padding-top: clamp(13px, 2.8vh, 30px);
    padding-bottom: clamp(38px, 8.2vh, 62px);
  }

  .leader-badge {
    top: 1.15vh;
    padding: 0.38vh 0.6vw;
    font-size: clamp(8px, 0.62vw, 12px);
  }

  .leader-footer {
    bottom: 1.05vh;
    left: 1.4vw;
    right: 1.4vw;
    gap: 0.8vw;
    width: auto;
    font-size: clamp(8px, 0.68vw, 12px);
  }

  .leader-reward-row {
    bottom: 4.25vh;
    left: 1.4vw;
    right: 1.4vw;
    width: auto;
    gap: 0.7vw;
    font-size: clamp(8px, 0.68vw, 12px);
    transform: translateY(3px);
  }

  .leader-reward-badge {
    padding: 0.9vh 0.85vw;
  }

  .leader-gap {
    padding: 0.28vw 0.48vw;
  }
}

@media (max-width: 720px) {
  .podium-card.first {
    min-height: 206px;
    padding-top: 48px;
    padding-bottom: 76px;
  }

  .podium-card.first::before {
    top: calc(50% - 16px);
  }

  .leader-badge {
    top: 13px;
  }

  .leader-footer {
    right: 16px;
    bottom: 13px;
    left: 16px;
    width: auto;
    font-size: clamp(8px, 2.5vw, 11px);
  }

  .leader-reward-row {
    right: 16px;
    bottom: 39px;
    left: 16px;
    width: auto;
    gap: 5px;
    font-size: clamp(8px, 2.35vw, 10px);
  }

  .leader-reward-badge {
    padding: 7px 9px;
  }
  
  .leader-reward-icon {
    font-size: 13px;
  }

  .leader-countdown {
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .podium-card.first,
  .podium-card.first::before,
  .podium-card.first .podium-rank::before,
  .leader-spotlight {
    animation: none;
  }

  .leader-sheen {
    display: none;
  }
}