/* Gachi stylesheet: detail-diploma.css. Challenge detail completion and diploma (incl. keyframes). */
/* Extracted verbatim from index.html. Load order is significant; see styles/README.md. */

.detail-completion-frame {
  position: relative;
}

.detail-completion-top {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.detail-completion-top .dashboard-floater-close {
  pointer-events: auto;
  background: rgba(34, 24, 8, 0.18);
  border: 1px solid rgba(255, 242, 196, 0.18);
  color: rgba(255, 246, 216, 0.86);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

#detail-completion-floater.is-silver .detail-completion-top .dashboard-floater-close {
  background: rgba(38, 45, 54, 0.46);
  border-color: rgba(219, 227, 235, 0.24);
  color: #f0f5fb;
}

#detail-completion-floater .dashboard-floater-card,
#detail-diploma-floater .dashboard-floater-card {
  padding: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-height: calc(100dvh - max(calc(var(--safe-top) + 12px), 4svh) - max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 8px)));
  max-height: calc(100svh - max(calc(var(--safe-top) + 12px), 4svh) - max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 8px)));
}

#detail-completion-floater .dashboard-floater-card::-webkit-scrollbar,
#detail-diploma-floater .dashboard-floater-card::-webkit-scrollbar {
  display: none;
}

#detail-completion-floater .detail-diploma {
  border: 0;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 233, 0.54),
    inset 0 -18px 30px rgba(44, 29, 7, 0.12);
}

#detail-completion-floater.is-silver .dashboard-floater-card {
  background: transparent;
  box-shadow: none;
}

#detail-completion-floater.is-silver .detail-diploma {
  background:
    linear-gradient(180deg, rgba(246, 249, 252, 0.22), rgba(223, 231, 238, 0.12) 24%, rgba(90, 101, 116, 0.26) 68%, rgba(54, 63, 76, 0.34) 100%),
    linear-gradient(135deg, rgba(118, 128, 142, 0.88), rgba(60, 68, 80, 0.84));
}

#detail-diploma-floater .dashboard-floater-top {
  position: absolute;
  top: 18px;
  right: 18px;
  left: auto;
  z-index: 1;
  justify-content: flex-end;
  pointer-events: none;
}

#detail-diploma-floater .dashboard-floater-top > div {
  display: none;
}

#detail-diploma-floater .dashboard-floater-close {
  pointer-events: auto;
  background: rgba(34, 24, 8, 0.18);
  border: 1px solid rgba(255, 242, 196, 0.18);
  color: rgba(255, 246, 216, 0.86);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

.detail-screen.is-diploma-muted #detail-diploma-floater {
  pointer-events: none;
}

.detail-screen.is-diploma-muted #detail-diploma-floater .dashboard-floater-card {
  opacity: 0.38;
  filter: saturate(0.68) brightness(0.86);
  transform: scale(0.986);
  transition: opacity 160ms ease, filter 160ms ease, transform 160ms ease;
}

.detail-screen.is-diploma-muted #detail-diploma-overlay {
  background: rgba(4, 10, 12, 0.2);
  backdrop-filter: blur(1px);
  pointer-events: none;
}

.detail-completion-copy,
.detail-completion-participants,
.detail-completion-score,
.detail-completion-note,
.detail-diploma-title,
.detail-diploma-score,
.detail-diploma-meta,
.detail-diploma-copy,
.detail-diploma-section-title,
.detail-diploma-section-copy {
  margin: 0;
}

.detail-completion-copy {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-completion-score,
.detail-diploma-score {
  color: var(--text-main);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.detail-completion-participants {
  color: var(--text-main);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.detail-completion-note,
.detail-diploma-meta,
.detail-diploma-participants,
.detail-diploma-copy,
.detail-diploma-section-copy,
.detail-diploma-goal-center-title,
.detail-diploma-goal-center-percent {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}

.detail-diploma {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 22px 18px 20px;
  border: 1px solid rgba(255, 236, 176, 0.72);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 248, 215, 0.42), rgba(255, 240, 181, 0.18) 24%, rgba(255, 240, 181, 0) 46%),
    linear-gradient(180deg, rgba(255, 246, 210, 0.34), rgba(235, 199, 100, 0.2) 29%, rgba(133, 97, 30, 0.28) 70%, rgba(62, 42, 13, 0.36) 100%),
    linear-gradient(135deg, rgba(169, 128, 41, 0.94), rgba(90, 62, 18, 0.9));
  box-shadow:
    0 22px 42px rgba(20, 14, 5, 0.26),
    inset 0 1px 0 rgba(255, 252, 233, 0.62),
    inset 0 -18px 30px rgba(44, 29, 7, 0.14),
    inset 0 0 0 1px rgba(172, 129, 40, 0.28);
  overflow: hidden;
  isolation: isolate;
}

.detail-diploma::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255, 238, 172, 0.62) 0 24px, transparent 24px) left top / 62px 2px no-repeat,
    linear-gradient(180deg, rgba(255, 238, 172, 0.62) 0 24px, transparent 24px) left top / 2px 62px no-repeat,
    linear-gradient(270deg, rgba(255, 238, 172, 0.62) 0 24px, transparent 24px) right top / 62px 2px no-repeat,
    linear-gradient(180deg, rgba(255, 238, 172, 0.62) 0 24px, transparent 24px) right top / 2px 62px no-repeat,
    linear-gradient(90deg, rgba(255, 238, 172, 0.5) 0 24px, transparent 24px) left bottom / 62px 2px no-repeat,
    linear-gradient(0deg, rgba(255, 238, 172, 0.5) 0 24px, transparent 24px) left bottom / 2px 62px no-repeat,
    linear-gradient(270deg, rgba(255, 238, 172, 0.5) 0 24px, transparent 24px) right bottom / 62px 2px no-repeat,
    linear-gradient(0deg, rgba(255, 238, 172, 0.5) 0 24px, transparent 24px) right bottom / 2px 62px no-repeat,
    linear-gradient(115deg, transparent 0%, rgba(255, 247, 214, 0.18) 24%, transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%);
  border: 1px solid rgba(255, 238, 172, 0.24);
  border-radius: 6px;
  pointer-events: none;
}

.detail-diploma.is-celebration {
  transform-origin: center;
  animation:
    detailDiplomaImpactPunch 560ms cubic-bezier(0.18, 1.34, 0.3, 1) both,
    detailDiplomaCelebrationTone 560ms ease-out both;
}

.detail-diploma.is-celebration::after {
  content: "";
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: -62%;
  width: 74%;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(255, 250, 221, 0.34) 0%, rgba(255, 231, 155, 0.16) 42%, rgba(255, 244, 204, 0) 74%);
  filter: blur(18px);
  transform: translateX(-30%) rotate(10deg);
  animation: detailDiplomaGoldSweep 1750ms ease-out 150ms both;
  pointer-events: none;
}

.detail-diploma-reverse-shine {
  position: absolute;
  top: -24%;
  bottom: -24%;
  right: -64%;
  width: 84%;
  z-index: 1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.62) 0%, rgba(255, 252, 234, 0.34) 35%, rgba(255, 255, 255, 0) 72%);
  filter: blur(13px);
  opacity: 0;
  transform: translateX(34%) rotate(-9deg);
  animation: detailDiplomaPearlBackSweep 1350ms ease-out 500ms both;
  pointer-events: none;
}

.detail-diploma > * {
  position: relative;
  z-index: 2;
}

.detail-diploma > .detail-diploma-reverse-shine {
  position: absolute;
  z-index: 1;
}

.detail-diploma-stage {
  position: relative;
  isolation: isolate;
}

.detail-diploma-stage::before {
  content: "";
  position: absolute;
  inset: -26px -20px;
  z-index: 0;
  border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(255, 211, 110, 0.35) 0%, rgba(255, 211, 110, 0.18) 34%, rgba(255, 211, 110, 0) 72%);
  filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  animation: detailDiplomaLandingGlow 250ms ease-out 310ms both;
}

.detail-diploma-stage > .detail-diploma {
  z-index: 1;
}

.detail-diploma-celebration {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}

.detail-diploma-celebration span {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--w, 6px);
  height: var(--h, 12px);
  border-radius: var(--radius, 2px 4px 2px 3px);
  background: var(--tone);
  clip-path: var(--clip, polygon(14% 0%, 100% 12%, 86% 100%, 0% 78%));
  opacity: 0;
  transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, 0deg)) skewX(var(--skew, 0deg)) scale(0.58);
  transform-origin: var(--origin-x, 46%) var(--origin-y, 42%);
  animation: detailDiplomaConfetti var(--duration, 3350ms) linear var(--delay) both;
  box-shadow: 0 0 7px rgba(255, 245, 205, 0.2);
  will-change: transform, opacity;
}

.detail-diploma-celebration span.is-circle {
  border-radius: 999px;
  clip-path: none;
}

.detail-diploma-celebration span.is-streamer,
.detail-diploma-celebration span.is-corkscrew {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 28%),
    linear-gradient(135deg, var(--tone), var(--tone-2, #fff2ad));
}

.detail-diploma-celebration span.is-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  background: var(--tone);
  animation-name: detailDiplomaSparkle;
  animation-duration: var(--duration, 1500ms);
  box-shadow: 0 0 12px rgba(255, 242, 173, 0.36);
}

.detail-diploma-celebration span.is-sparkle {
  border-radius: 999px;
  clip-path: none;
  background: radial-gradient(circle, var(--tone) 0 28%, rgba(255, 255, 255, 0.42) 30%, transparent 72%);
  animation-name: detailDiplomaSparkle;
  animation-duration: var(--duration, 1400ms);
  box-shadow: 0 0 14px rgba(255, 250, 221, 0.42);
}

.detail-diploma-celebration span.is-gold-linger {
  animation-duration: var(--duration, 3300ms);
  box-shadow: 0 0 12px rgba(255, 211, 110, 0.22);
}

.detail-diploma-celebration span.is-arc-b {
  animation-name: detailDiplomaConfettiArcB;
}

.detail-diploma-celebration span.is-arc-c {
  animation-name: detailDiplomaConfettiArcC;
}

.detail-diploma-celebration span.is-arc-d {
  animation-name: detailDiplomaConfettiArcD;
}

.detail-diploma-celebration span.is-corkscrew {
  width: var(--w, 11px);
  height: var(--h, 24px);
  border-radius: 0;
  clip-path: none;
  background: none;
  animation-name: detailDiplomaCorkscrew;
  animation-duration: var(--duration, 2700ms);
  transform-origin: var(--origin-x, 50%) var(--origin-y, 20%);
  box-shadow: none;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 245, 205, 0.2));
}

.detail-diploma-celebration span.is-corkscrew::before,
.detail-diploma-celebration span.is-corkscrew::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.detail-diploma-celebration span.is-corkscrew::before {
  inset: 0;
  background:
    radial-gradient(ellipse 92% 22% at 50% 16%, transparent 0 38%, var(--tone) 41% 58%, transparent 61%),
    radial-gradient(ellipse 92% 22% at 50% 50%, transparent 0 38%, var(--tone-2, #fff2ad) 41% 58%, transparent 61%),
    radial-gradient(ellipse 92% 22% at 50% 84%, transparent 0 38%, var(--tone) 41% 58%, transparent 61%);
}

.detail-diploma-celebration span.is-corkscrew::after {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1.5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--tone), var(--tone-2, #fff2ad));
  opacity: 0.48;
  transform: translateX(-50%);
}

.detail-diploma-celebration span.is-corkscrew.is-arc-b {
  animation-name: detailDiplomaCorkscrewArcB;
}

.detail-diploma-celebration span.is-corkscrew.is-arc-c,
.detail-diploma-celebration span.is-corkscrew.is-arc-d {
  animation-name: detailDiplomaCorkscrewArcC;
}

.detail-diploma.is-celebration .detail-diploma-score {
  animation: detailDiplomaScorePulse 900ms ease-out 120ms both;
}

@keyframes detailDiplomaImpactPunch {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  55% {
    opacity: 1;
    transform: scale(1.05);
  }
  78% {
    opacity: 1;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes detailDiplomaLandingGlow {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
  }
}

@keyframes detailDiplomaCelebrationTone {
  0% {
    filter: saturate(0.9) brightness(0.96);
  }
  58% {
    filter: saturate(1.06) brightness(1.04);
  }
  100% {
    filter: none;
  }
}

@keyframes detailDiplomaGoldSweep {
  0% {
    opacity: 0;
    transform: translateX(-30%) rotate(10deg);
  }
  34% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(245%) rotate(10deg);
  }
}

@keyframes detailDiplomaPearlBackSweep {
  0% {
    opacity: 0;
    transform: translateX(54%) rotate(-9deg);
  }
  30% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translateX(-280%) rotate(-9deg);
  }
}

@keyframes detailDiplomaConfetti {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, 0deg)) skewX(var(--skew, 0deg)) scale(0.58);
  }
  4% {
    opacity: var(--peak-opacity, 1);
  }
  8% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--launch-x), var(--launch-y), 0) rotate(var(--rot-launch, 70deg)) skewX(var(--skew-launch, 0deg)) scale(0.86);
  }
  18% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--rot-burst, 120deg)) skewX(var(--skew-burst, 0deg)) scale(0.96);
  }
  50% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--rot-float, 260deg)) skewX(var(--skew, 0deg)) scale(0.92);
  }
  76% {
    opacity: var(--late-opacity, 0.88);
    transform: translate3d(var(--mid-x), var(--mid-y), 0) rotate(var(--rot-mid, 360deg)) skewX(var(--skew-mid, 0deg)) scale(0.86);
  }
  90% {
    opacity: var(--bounce-opacity, 0.62);
    transform: translate3d(var(--bounce-x), var(--bounce-y), 0) rotate(var(--rot-bounce, 390deg)) skewX(var(--skew-burst, 0deg)) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--rot-end, 420deg)) skewX(var(--skew, 0deg)) scale(0.82);
  }
}

@keyframes detailDiplomaSparkle {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, 0deg)) scale(0.2);
  }
  12% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--launch-x), var(--launch-y), 0) rotate(var(--rot-launch, 80deg)) scale(0.7);
  }
  28% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--rot-burst, 120deg)) scale(1);
  }
  62% {
    opacity: var(--late-opacity, 0.72);
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--rot-float, 260deg)) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--rot-end, 420deg)) scale(0.16);
  }
}

@keyframes detailDiplomaConfettiArcB {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, 0deg)) skewX(var(--skew, 0deg)) scale(0.58);
  }
  4% {
    opacity: var(--peak-opacity, 1);
  }
  8% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--launch-x), var(--launch-y), 0) rotate(var(--rot-launch, 70deg)) skewX(var(--skew-launch, 0deg)) scale(0.88);
  }
  17% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--rot-burst, 120deg)) skewX(var(--skew-burst, 0deg)) scale(1);
  }
  47% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--rot-float, 260deg)) skewX(var(--skew, 0deg)) scale(0.96);
  }
  74% {
    opacity: var(--late-opacity, 0.94);
    transform: translate3d(var(--mid-x), var(--mid-y), 0) rotate(var(--rot-mid, 360deg)) skewX(var(--skew-mid, 0deg)) scale(0.9);
  }
  90% {
    opacity: var(--bounce-opacity, 0.62);
    transform: translate3d(var(--bounce-x), var(--bounce-y), 0) rotate(var(--rot-bounce, 390deg)) skewX(var(--skew-burst, 0deg)) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--rot-end, 420deg)) skewX(var(--skew, 0deg)) scale(0.82);
  }
}

@keyframes detailDiplomaConfettiArcC {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, 0deg)) skewX(var(--skew, 0deg)) scale(0.58);
  }
  4% {
    opacity: var(--peak-opacity, 1);
  }
  8% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--launch-x), var(--launch-y), 0) rotate(var(--rot-launch, 70deg)) skewX(var(--skew-launch, 0deg)) scale(0.88);
  }
  19% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--rot-burst, 120deg)) skewX(var(--skew-burst, 0deg)) scale(1);
  }
  51% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--rot-float, 260deg)) skewX(var(--skew, 0deg)) scale(0.96);
  }
  77% {
    opacity: var(--late-opacity, 0.94);
    transform: translate3d(var(--mid-x), var(--mid-y), 0) rotate(var(--rot-mid, 360deg)) skewX(var(--skew-mid, 0deg)) scale(0.9);
  }
  92% {
    opacity: var(--bounce-opacity, 0.62);
    transform: translate3d(var(--bounce-x), var(--bounce-y), 0) rotate(var(--rot-bounce, 390deg)) skewX(var(--skew-burst, 0deg)) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--rot-end, 420deg)) skewX(var(--skew, 0deg)) scale(0.82);
  }
}

@keyframes detailDiplomaConfettiArcD {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, 0deg)) skewX(var(--skew, 0deg)) scale(0.58);
  }
  4% {
    opacity: var(--peak-opacity, 1);
  }
  9% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--launch-x), var(--launch-y), 0) rotate(var(--rot-launch, 70deg)) skewX(var(--skew-launch, 0deg)) scale(0.88);
  }
  21% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--rot-burst, 120deg)) skewX(var(--skew-burst, 0deg)) scale(1);
  }
  54% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--rot-float, 260deg)) skewX(var(--skew, 0deg)) scale(0.96);
  }
  79% {
    opacity: var(--late-opacity, 0.94);
    transform: translate3d(var(--mid-x), var(--mid-y), 0) rotate(var(--rot-mid, 360deg)) skewX(var(--skew-mid, 0deg)) scale(0.9);
  }
  93% {
    opacity: var(--bounce-opacity, 0.62);
    transform: translate3d(var(--bounce-x), var(--bounce-y), 0) rotate(var(--rot-bounce, 390deg)) skewX(var(--skew-burst, 0deg)) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--rot-end, 420deg)) skewX(var(--skew, 0deg)) scale(0.82);
  }
}

@keyframes detailDiplomaCorkscrew {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, 0deg)) skewX(var(--skew, 0deg)) skewY(-12deg) scale(0.54);
  }
  3% {
    opacity: var(--peak-opacity, 1);
  }
  7% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--launch-x), var(--launch-y), 0) rotate(var(--rot-launch, 130deg)) skewX(var(--skew-launch, 0deg)) skewY(-8deg) scale(0.82);
  }
  15% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--rot-burst, 220deg)) skewX(var(--skew-burst, 0deg)) skewY(14deg) scale(0.98);
  }
  48% {
    opacity: var(--peak-opacity, 0.96);
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--rot-float, 620deg)) skewX(var(--skew, 0deg)) skewY(-16deg) scale(0.94);
  }
  72% {
    opacity: var(--late-opacity, 0.82);
    transform: translate3d(var(--mid-x, var(--float-x)), var(--mid-y, var(--float-y)), 0) rotate(var(--rot-mid, 900deg)) skewX(var(--skew-mid, 0deg)) skewY(12deg) scale(0.9);
  }
  84% {
    opacity: var(--bounce-opacity, 0.58);
    transform: translate3d(var(--bounce-x), var(--bounce-y), 0) rotate(var(--rot-bounce, 980deg)) skewX(var(--skew-burst, 0deg)) skewY(10deg) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--rot-end, 1180deg)) skewX(var(--skew, 0deg)) skewY(-10deg) scale(0.76);
  }
}

@keyframes detailDiplomaCorkscrewArcB {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, 0deg)) skewX(var(--skew, 0deg)) skewY(-12deg) scale(0.54);
  }
  3% {
    opacity: var(--peak-opacity, 1);
  }
  7% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--launch-x), var(--launch-y), 0) rotate(var(--rot-launch, 130deg)) skewX(var(--skew-launch, 0deg)) skewY(-8deg) scale(0.82);
  }
  15% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--rot-burst, 220deg)) skewX(var(--skew-burst, 0deg)) skewY(14deg) scale(1);
  }
  47% {
    opacity: var(--peak-opacity, 0.96);
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--rot-float, 620deg)) skewX(var(--skew, 0deg)) skewY(-16deg) scale(0.94);
  }
  72% {
    opacity: var(--late-opacity, 0.82);
    transform: translate3d(var(--mid-x, var(--float-x)), var(--mid-y, var(--float-y)), 0) rotate(var(--rot-mid, 900deg)) skewX(var(--skew-mid, 0deg)) skewY(12deg) scale(0.9);
  }
  84% {
    opacity: var(--bounce-opacity, 0.58);
    transform: translate3d(var(--bounce-x), var(--bounce-y), 0) rotate(var(--rot-bounce, 980deg)) skewX(var(--skew-burst, 0deg)) skewY(10deg) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--rot-end, 1180deg)) skewX(var(--skew, 0deg)) skewY(-10deg) scale(0.76);
  }
}

@keyframes detailDiplomaCorkscrewArcC {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rot-start, 0deg)) skewX(var(--skew, 0deg)) skewY(-12deg) scale(0.54);
  }
  3% {
    opacity: var(--peak-opacity, 1);
  }
  8% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--launch-x), var(--launch-y), 0) rotate(var(--rot-launch, 130deg)) skewX(var(--skew-launch, 0deg)) skewY(-8deg) scale(0.82);
  }
  17% {
    opacity: var(--peak-opacity, 1);
    transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--rot-burst, 220deg)) skewX(var(--skew-burst, 0deg)) skewY(14deg) scale(1);
  }
  49% {
    opacity: var(--peak-opacity, 0.96);
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--rot-float, 620deg)) skewX(var(--skew, 0deg)) skewY(-16deg) scale(0.94);
  }
  73% {
    opacity: var(--late-opacity, 0.82);
    transform: translate3d(var(--mid-x, var(--float-x)), var(--mid-y, var(--float-y)), 0) rotate(var(--rot-mid, 900deg)) skewX(var(--skew-mid, 0deg)) skewY(12deg) scale(0.9);
  }
  85% {
    opacity: var(--bounce-opacity, 0.58);
    transform: translate3d(var(--bounce-x), var(--bounce-y), 0) rotate(var(--rot-bounce, 980deg)) skewX(var(--skew-burst, 0deg)) skewY(10deg) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--rot-end, 1180deg)) skewX(var(--skew, 0deg)) skewY(-10deg) scale(0.76);
  }
}

@keyframes detailDiplomaScorePulse {
  0% {
    text-shadow: 0 0 0 rgba(255, 224, 126, 0);
    transform: scale(0.96);
  }
  52% {
    text-shadow: 0 0 28px rgba(255, 224, 126, 0.28);
    transform: scale(1.035);
  }
  100% {
    text-shadow: 0 0 22px rgba(255, 224, 126, 0.16);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-diploma-stage,
  .detail-diploma-stage::before,
  .detail-diploma.is-celebration,
  .detail-diploma.is-celebration::after,
  .detail-diploma-reverse-shine,
  .detail-diploma.is-celebration .detail-diploma-score,
  .detail-diploma-celebration span {
    animation: none;
  }

  .detail-diploma-celebration {
    display: none;
  }
}

.detail-diploma.is-silver {
  border: 1px solid rgba(216, 224, 232, 0.5);
  background:
    linear-gradient(180deg, rgba(246, 249, 252, 0.22), rgba(223, 231, 238, 0.12) 24%, rgba(90, 101, 116, 0.26) 68%, rgba(54, 63, 76, 0.34) 100%),
    linear-gradient(135deg, rgba(118, 128, 142, 0.88), rgba(60, 68, 80, 0.84));
  box-shadow:
    0 18px 36px rgba(12, 16, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(122, 132, 146, 0.28);
}

#detail-completion-floater .detail-diploma.is-silver {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.detail-diploma.is-silver .detail-diploma-title {
  color: #eef3f8;
}

.detail-diploma.is-silver .detail-diploma-score {
  color: #f0f5fb;
  text-shadow: 0 0 18px rgba(225, 234, 244, 0.1);
}

.detail-diploma.is-silver .detail-diploma-meta,
.detail-diploma.is-silver .detail-diploma-participants,
.detail-diploma.is-silver .detail-diploma-copy,
.detail-diploma.is-silver .detail-diploma-section-copy {
  color: rgba(241, 246, 251, 0.9);
}

.detail-diploma.is-silver .detail-diploma-section,
.detail-diploma.is-silver .detail-diploma-summary {
  border-top-color: rgba(220, 228, 236, 0.16);
}

.detail-diploma.is-silver .detail-diploma-section-title {
  color: #e2eaf2;
}

.detail-diploma.is-silver .detail-diploma-action.is-primary {
  border: 1px solid rgba(109, 120, 134, 0.24);
  background: linear-gradient(180deg, #e6edf5, #b5c1ce);
  color: #28313c;
  box-shadow: 0 10px 20px rgba(19, 24, 30, 0.18);
}

.detail-diploma.is-silver .detail-diploma-action.is-secondary {
  border: 1px solid rgba(221, 229, 237, 0.28);
  background: rgba(49, 58, 68, 0.3);
  color: #f0f5fb;
}

#detail-completion-floater.is-silver .detail-diploma-action.is-primary {
  border: 1px solid rgba(109, 120, 134, 0.24);
  background: linear-gradient(180deg, #e6edf5, #b5c1ce);
  color: #28313c;
  box-shadow: 0 10px 20px rgba(19, 24, 30, 0.18);
}

#detail-completion-floater.is-silver .detail-diploma-action.is-secondary {
  border: 1px solid rgba(221, 229, 237, 0.28);
  background: rgba(49, 58, 68, 0.3);
  color: #f0f5fb;
}

.detail-diploma-title {
  color: #fff5cf;
  font-size: clamp(1.06rem, 4.4vw, 1.3rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.02em;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

.detail-diploma-score {
  color: #fff0b8;
  font-size: 2.4rem;
  text-shadow: 0 0 22px rgba(255, 224, 126, 0.16);
}

.detail-diploma-meta,
.detail-diploma-copy,
.detail-diploma-section-copy {
  color: rgba(255, 245, 220, 0.82);
}

.detail-diploma-participants {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  color: rgba(255, 245, 220, 0.92);
  font-size: 1.62rem;
  font-weight: 600;
  line-height: 1.08;
  text-align: center;
  margin-top: 0;
  margin-bottom: 6px;
}

.detail-diploma-participant-name {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  text-shadow:
    0 1px 1px rgba(37, 24, 5, 0.24),
    0 0 12px rgba(37, 24, 5, 0.18);
}

.detail-diploma-participant-name:only-child {
  grid-column: 1 / -1;
  text-align: center;
}

.detail-diploma-participant-name.is-left {
  text-align: right;
}

.detail-diploma-participant-name.is-right {
  text-align: left;
}

.detail-diploma-participant-separator {
  width: 34px;
  color: rgba(255, 242, 196, 0.9);
  font-size: 1.36rem;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 2px 5px rgba(42, 25, 5, 0.2));
}

.detail-diploma-meta {
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.detail-diploma-score {
  margin-top: 0;
}

.detail-diploma-copy {
  max-width: none;
  margin: 0 auto;
}

.detail-diploma-copy.is-summary {
  display: grid;
  gap: 4px;
  justify-items: center;
  white-space: normal;
  color: rgba(255, 245, 220, 0.82);
  font-size: 0.9rem;
  line-height: 1.4;
}

.detail-diploma-copy-line {
  display: block;
}

.detail-diploma-copy.is-summary .detail-diploma-copy-line {
  max-width: 100%;
}

.detail-diploma-copy.is-summary {
  padding-top: 0;
  border-top: 0;
}

.detail-diploma-summary {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(241, 217, 142, 0.16);
}

.detail-diploma-section {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(241, 217, 142, 0.16);
}

.detail-diploma-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.detail-diploma-section-copy {
  display: grid;
  gap: 2px;
  color: rgba(255, 245, 220, 0.82);
  font-size: 0.9rem;
  line-height: 1.4;
}

.detail-diploma-section-copy.is-inline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-diploma-section-copy.is-stack {
  gap: 4px;
}

.detail-diploma-section-copy-line {
  display: block;
}

.detail-diploma-goals {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-diploma-goals li {
  display: grid;
  gap: 4px;
}

.detail-diploma-goal-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}

.detail-diploma-goal-line.is-label {
  color: rgba(255, 245, 220, 0.84);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
}

.detail-diploma-goal-line.is-stats {
  color: rgba(255, 245, 220, 0.64);
  font-size: 0.78rem;
  line-height: 1.2;
}

.detail-diploma-goal-side {
  min-width: 0;
}

.detail-diploma-goal-side.is-left {
  text-align: left;
}

.detail-diploma-goal-side.is-right {
  text-align: right;
}

.detail-diploma-goal-center {
  min-width: 0;
  text-align: center;
}

.detail-diploma-goal-center-title,
.detail-diploma-goal-center-percent {
  display: inline;
  font-weight: 400;
  word-break: break-word;
}

.detail-diploma-goal-center-title {
  color: rgba(255, 245, 220, 0.92);
}

.detail-diploma-goal-center-percent {
  color: rgba(255, 245, 220, 0.64);
  letter-spacing: 0.03em;
}

.detail-diploma-goal-total {
  margin: 8px 0 0;
  color: rgba(255, 245, 220, 0.74);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
}

.detail-diploma-section-title {
  color: #f9e6ae;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.detail-diploma-actions {
  display: grid;
  gap: 6px;
  margin: 10px 2px 0;
}

.detail-diploma-actions.is-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-diploma-actions.is-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-diploma-action {
  min-height: 32px;
  padding: 5px 5px;
  border-radius: 8px;
  font-size: clamp(0.72rem, 3.1vw, 0.8rem);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.detail-diploma-action.is-primary {
  border: 1px solid rgba(90, 63, 17, 0.24);
  background: linear-gradient(180deg, #f4de98, #ddb85a);
  color: #30220a;
  box-shadow: 0 10px 20px rgba(31, 20, 4, 0.2);
}

.detail-diploma-action.is-secondary {
  border: 1px solid rgba(241, 217, 142, 0.28);
  background: rgba(47, 33, 10, 0.34);
  color: #fff2c4;
}

@media (max-width: 380px), (max-height: 760px) {
  .detail-diploma {
    gap: 7px;
    padding: 20px 16px 18px;
  }

  .detail-diploma-participants {
    font-size: 1.48rem;
    column-gap: 8px;
  }

  .detail-diploma-participant-separator {
    width: 30px;
    font-size: 1.24rem;
  }

  .detail-diploma-score {
    font-size: 2.2rem;
  }

  .detail-diploma-summary,
  .detail-diploma-section {
    margin-top: 10px;
    padding-top: 10px;
  }

  .detail-diploma-goals {
    gap: 8px;
  }

  .detail-diploma-actions {
    margin-inline: 1px;
  }

  .detail-diploma-action {
    min-height: 31px;
    padding-inline: 4px;
  }
}

.detail-tie-card {
  display: grid;
  gap: 12px;
  padding: 22px 18px 18px;
  border: 1px solid rgba(111, 224, 192, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(111, 224, 192, 0.12), rgba(27, 68, 80, 0.22) 34%, rgba(14, 36, 44, 0.94) 100%),
    linear-gradient(135deg, rgba(27, 68, 80, 0.96), rgba(12, 31, 38, 0.98));
  box-shadow:
    0 18px 36px rgba(4, 14, 18, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.detail-tie-eyebrow,
.detail-tie-score,
.detail-tie-copy {
  margin: 0;
  text-align: center;
}

.detail-tie-eyebrow {
  color: #bed8d4;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-tie-score {
  color: #edf7f5;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}

.detail-tie-copy {
  color: rgba(237, 247, 245, 0.84);
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: var(--event-floater-copy-max-width);
  justify-self: center;
}

.detail-tie-participants {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.15;
  color: #edf7f5;
  max-width: none;
}

.detail-tie-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.detail-tie-button {
  position: relative;
  z-index: 1;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
}

.detail-tie-button.is-secondary {
  border: 1px solid rgba(111, 224, 192, 0.2);
  background: rgba(111, 224, 192, 0.08);
  color: #edf7f5;
}

.detail-tie-button.is-primary {
  border: 1px solid rgba(111, 224, 192, 0.24);
  background: linear-gradient(180deg, rgba(111, 224, 192, 0.92), rgba(67, 195, 158, 0.92));
  color: #12333b;
  box-shadow: 0 10px 20px rgba(14, 41, 49, 0.2);
}

.detail-tie-button.is-stacked-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.08;
  text-align: center;
}