/* Stage 5: final verdict — aggregate score, per-test rings, holla gate. */

#stage5 {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 4% 40px;
  overflow-y: auto;
  z-index: 6;
}

body.s5 #stage5 { display: flex; }
body.s5 .card { display: none; }

/* Anna reacts from the corner, same as the movie/looks stages */
body.s5 .avatar {
  transform: translateX(-50%) translateX(37vw) scale(.5);
  z-index: 4;
  pointer-events: none;
}

/* the sky is pale up top — give the header and verdict solid DS colors */
#stage5 .shelfHead b { color: var(--pink); }
#stage5 .shelfHead span { color: var(--pink-heading); }

.fAgg { text-align: center; }

.fAgg b {
  display: block;
  font-size: min(120px, 16vw);
  line-height: 1;
  color: var(--pink);
}

.fAgg span {
  color: var(--pink-heading);
  font-size: 19px;
  font-weight: 800;
}

.fRings {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
}

.fCell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fRingWrap {
  position: relative;
  width: 104px;
  height: 104px;
}

.fRingWrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.fBg {
  fill: none;
  stroke: rgba(255, 255, 255, .5);
  stroke-width: 9;
}

.fFill {
  fill: none;
  stroke: var(--pink);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s ease-out;
}

.fRingWrap b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: var(--pink-heading);
}

.fCell > span {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  color: var(--pink-heading);
}

/* the gate: socials when eligible, the consolation lineup when not */
.fAction {
  width: 100%;
  padding: 18px 24px;
  text-align: center;
  max-width: 580px;
}

.fAction b {
  display: block;
  font-size: 22px;
  color: var(--pink-heading);
  margin-bottom: 4px;
}

.fAction span {
  color: var(--ink);
  font-size: 14px;
}

.fLinks {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

a.fBtn {
  width: auto;
  margin-top: 0;
  padding: 12px 26px;
  display: inline-block;
  text-decoration: none;
}

.fCelebs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin-top: 14px;
}

.fCelebs a {
  flex: 0 1 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: #fff;
  border: 3px solid var(--pink-border);
  border-radius: 12px;
  padding: 10px 8px;
  color: var(--pink-heading);
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

.fCelebs img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
}

.fCelebs a span {
  color: var(--pink-heading);
  font-weight: 800;
  line-height: 1.2;
}

.fCelebs a:hover { background: var(--pink-soft); }