/*
 * DIV-TRAV page stylesheet.
 * Extracted from templates/ranking/challenge.html; no inline <style> remains in the template.
 */

/* Section 1. */
.progress2,
.progress3 {
  width: 80%;
  height: 22px;
  margin: 12px auto;
  border-radius: 12px;
  background: linear-gradient(180deg, #f1f3f6, #dfe3e8);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.15),
    0 4px 10px rgba(0,0,0,.12);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.15);
}

.progress-bar2,
.progress-bar3 {
  height: 100%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);

  background: linear-gradient(
    90deg,
    #5f67ff 0%,
    #979fff 45%,
    #c1c6ff 100%
  );

  transition: width .7s ease;
  position: relative;
}

.progress-bar2::after,
.progress-bar3::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,0)
  );
  pointer-events: none;
}

@property --progress-value {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@keyframes total_raid-progress {
  to { --progress-value: var(--progress-target, 0); }
}

.progress-bar {
  width: 165px;
  height: 165px;
  margin-top: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  box-shadow:
    inset 0 4px 8px rgba(0,0,0,.18),
    0 10px 22px rgba(0,0,0,.25);
}

.progress-bar::before {
  counter-reset: percentage var(--progress-value);
  content: counter(percentage) '%';
  position: absolute;
  font-size: 26px;
  font-weight: 900;
  color: #111;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.total_raid {
  background:
    radial-gradient(closest-side, #ffffff 74%, transparent 75%),
    conic-gradient(
      #2ecc71 calc(var(--progress-value) * 1%),
      #d6eadf 0
    );

  animation: total_raid-progress 1.8s ease-out forwards;
}

.total_raid::before {
  animation: total_raid-progress 1.8s ease-out forwards;
}

progress.total_raid {
  display: none;
}

/* The dial animates its fill; honour a reduced-motion preference by jumping
   straight to the final value instead. */
@media (prefers-reduced-motion: reduce) {
  .total_raid,
  .total_raid::before {
    animation-duration: 0s;
  }
}