/* WORKOUT FINISH SCREEN (see finish.js). Quiet on purpose:
   fade in > title > line > score ring > stats > button, about 3s.
   .is-static (tap to skip, or reduced motion) jumps to the end. */

.finish {
  position: fixed; inset: 0; z-index: var(--z-dialog, 150);
  display: grid; place-items: center; cursor: pointer;
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--text, #fff);
  /* Every colour, font and corner below comes from the active theme pack,
     so this screen is re-skinned by switching theme and needs no code. */
  background:
    radial-gradient(70% 50% at 50% 42%, color-mix(in srgb, var(--accent) calc(var(--glow-alpha, 0.15) * 100%), transparent), transparent 72%),
    var(--bg, #0a0a0e);
  animation: fin-in 0.35s ease-out both;
}
/* CRT lines: only visible in themes that set --scanline-alpha (Toxic). */
.finish::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, calc(var(--scanline-alpha, 0) * 0.5)) 0 1px, transparent 1px 3px);
}
.finish.is-leaving { animation: fin-out 0.24s ease-in both; }
@keyframes fin-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fin-out { to { opacity: 0; } }

.finish-body { width: min(100%, 360px); display: grid; justify-items: center; gap: 22px; text-align: center; }

.finish-title {
  margin: 0; text-wrap: balance;
  font-family: var(--font-display, inherit); font-weight: var(--display-weight, 700);
  font-size: clamp(1.4rem, calc(2.2rem * var(--display-scale, 1)), 2.4rem);
  line-height: var(--display-line, 1.1); letter-spacing: var(--display-tracking, 0.02em);
  text-transform: var(--display-transform, none); color: var(--text, #fff);
  opacity: 0; animation: fin-up 0.5s ease-out 0.25s both;
}
.finish-note { margin: -14px 0 0; font-size: 0.85rem; color: var(--accent); opacity: 0; animation: fin-up 0.5s ease-out 0.4s both; }

.finish-quote {
  margin: 0; font-weight: var(--body-weight, 500); font-size: 1.05rem; line-height: 1.5; font-style: italic; color: var(--text-dim, #bbb);
  opacity: 0; animation: fin-up 0.6s ease-out 0.55s both;
}

.fin-gauge { position: relative; width: 200px; height: 200px; opacity: 0; animation: fin-up 0.5s ease-out 0.85s both; }
.fin-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fin-gauge circle { fill: none; stroke-width: 5; }
.fin-track { stroke: var(--rim, #2b2b38); }
.fin-arc { stroke: var(--gc, var(--accent)); stroke-linecap: round; transition: stroke 0.3s;
  filter: drop-shadow(0 0 calc(var(--glow-alpha, 0.15) * 40px) var(--gc, var(--accent))); }
.fin-gauge-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.fin-num { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; }
.fin-num b {
  font-family: var(--font-display, inherit); font-weight: var(--display-weight, 800);
  font-size: clamp(2.6rem, calc(3.8rem * var(--display-scale, 1)), 4rem); line-height: 1;
  letter-spacing: 0.02em; color: var(--text, #fff);
}
.fin-num small { font-size: 0.95rem; color: var(--text-dimmer, #8d8d9a); }
.fin-label { font-size: 0.78rem; color: var(--text-dimmer, #8d8d9a); }

.fin-grade { margin: -8px 0 0; font-size: 0.9rem; color: var(--text-dimmer, #8d8d9a); opacity: 0; animation: fin-up 0.4s ease-out 0.85s both; }
.fin-grade b {
  display: inline-block; margin-left: 4px; font-size: 1.25rem; color: var(--gc, var(--text));
  font-family: var(--font-display, inherit); font-weight: var(--display-weight, 700); transition: color 0.3s;
}
.fin-grade b.pop { animation: fin-pop 0.35s cubic-bezier(0.2, 1.6, 0.3, 1); }
@keyframes fin-pop { 0% { transform: scale(1.9); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
/* Each grade has its own colour, from the theme's own palette. */
.finish[data-g="S"] { --gc: color-mix(in srgb, var(--tier-gold, #f5c842) 75%, var(--text, #fff)); }
.finish[data-g="A"] { --gc: var(--accent); }
.finish[data-g="B"] { --gc: var(--support, var(--accent)); }
.finish[data-g="C"] { --gc: var(--text-dim, #b9b9c4); }
.finish[data-g="D"] { --gc: var(--text-dimmer, #8d8d9a); }

.finish-stats {
  margin: 0; padding: 14px 0 0; list-style: none; width: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  border-top: var(--border-w, 1px) solid var(--rim, #2b2b38);
  opacity: 0; animation: fin-up 0.4s ease-out 2.6s both;
}
.finish-stats b { display: block; font-size: 0.98rem; font-variant-numeric: tabular-nums; color: var(--text, #fff); }
.finish-stats span { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--text-dimmer, #8d8d9a); }

.finish-btn {
  width: 100%; padding: 14px; border: 0; border-radius: var(--r-md, 12px); cursor: pointer;
  font: inherit; font-family: var(--font-display, inherit); font-weight: var(--display-weight, 700);
  letter-spacing: var(--display-tracking, 0.02em); text-transform: var(--display-transform, none);
  color: var(--on-accent, #fff); background: var(--accent);
  opacity: 0; animation: fin-up 0.4s ease-out 2.9s both;
}
.finish-btn:active { transform: scale(0.98); }
.finish-btn:focus-visible { outline: 2px solid var(--text, #fff); outline-offset: 3px; }

@keyframes fin-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Skip / reduced motion: the end state, nothing moving */
.finish.is-static *, .finish.is-static::before { animation: none !important; }
.finish.is-static :is(.finish-title, .finish-note, .finish-quote, .fin-gauge, .fin-grade, .finish-stats, .finish-btn) { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .finish, .finish.is-leaving { animation: none; } }