/* =========================================================
   FINAL SCREEN — scoped under .finale
   root = div.screen--finale.finale inside the stage
   (a size container named "stage").
   ========================================================= */

.screen--finale.finale {
  display: block;
  padding: 0;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
  scrollbar-width: thin;
}

.finale .fin-wrap {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(12px, 2.6cqh, 24px) clamp(12px, 3cqw, 32px) clamp(14px, 2.6cqh, 24px);
  overflow-x: clip;
}

/* ---------- background ---------- */
.finale .fin-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(50% 42% at 50% 16%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(40% 50% at 12% 80%, rgba(255, 190, 222, .55), transparent 70%),
    radial-gradient(40% 50% at 90% 70%, rgba(214, 196, 255, .55), transparent 70%),
    linear-gradient(170deg, #fff2f8 0%, #f6ecff 55%, #eaf4ff 100%);
}
.finale .fin-bg__rays {
  position: absolute;
  left: 50%; top: 14%;
  width: 180vmax; height: 180vmax;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .55) 0 7deg, rgba(255, 255, 255, 0) 7deg 16deg);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
  mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
  animation: spa-spin 60s linear infinite;
}
.finale .fin-bg__spark {
  position: absolute;
  left: calc(6% + var(--i) * 9.6%);
  top: calc(10% + (var(--i) * 37 % 80) * 1%);
  font-size: calc(12px + (var(--i) * 7 % 3) * 6px);
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 140, 196, .9);
  animation: fin-twinkle calc(2s + (var(--i) * 3 % 5) * .4s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -.37s);
}
.finale .fin-bg__spark:nth-child(3n) { color: #ffd76a; }
.finale .fin-bg__spark:nth-child(4n) { color: #c9b2ff; }
@keyframes fin-twinkle { 50% { opacity: .25; transform: scale(.6) rotate(25deg); } }

/* ---------- title + name ---------- */
.finale .fin-head { grid-area: head; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.finale .fin-kicker {
  padding: .45em 1.1em;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--pink-2), var(--pink));
  border: 2px solid #fff;
  box-shadow: 0 4px 0 var(--pink-deep), 0 8px 18px rgba(255, 95, 168, .35);
  color: #fff;
  font-size: .62rem;
  rotate: -2deg;
  opacity: 0;
}
.finale.is-run .fin-kicker { animation: spa-pop-in .5s var(--ease-pop) .1s both; }
.finale .fin-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .12em;
  margin: 0;
  font-size: clamp(1.8rem, min(6.4cqw, 8cqh), 3.4rem);
  line-height: 1;
  outline: none;
  opacity: 0;
}
.finale .fin-title__text { font-style: italic; text-transform: uppercase; letter-spacing: .01em; padding: .04em .06em .08em; }
.finale .fin-title__spark { font-size: .8em; line-height: 1; filter: drop-shadow(0 2px 6px rgba(255, 200, 80, .6)); animation: fin-spark 2.4s ease-in-out infinite; }
@keyframes fin-spark { 50% { transform: rotate(14deg) scale(1.15); } }
.finale .fin-title.is-in { animation: fin-stamp .7s var(--ease-pop) both; }
@keyframes fin-stamp {
  0% { opacity: 0; transform: scale(1.8) rotate(-4deg); filter: blur(4px); }
  55% { opacity: 1; transform: scale(.94) rotate(1deg); filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
.finale .fin-name {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2px 0 0;
  font: 800 clamp(.95rem, min(2.6cqw, 4cqh), 1.5rem)/1.2 var(--font-display);
  letter-spacing: .34em;
  color: var(--ink);
  padding-left: .34em; /* balance the trailing letter-spacing */
}
.finale .fin-name__ch { display: inline-block; opacity: 0; transform: translateY(-14px); }
.finale .fin-name.is-in .fin-name__ch { animation: fin-letter .45s var(--ease-pop) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes fin-letter { to { opacity: 1; transform: none; } }

/* ---------- body layout ---------- */
.finale .fin-body {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas: "head head" "photo receipt" "next next";
  align-items: start;
  gap: 12px 12px;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
}
.finale .fin-photo { grid-area: photo; }
.finale .fin-receipt { grid-area: receipt; }
.finale .fin-next { grid-area: next; }

/* ---------- the snapshot ---------- */
.finale .fin-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 300px;
  justify-self: center;
  padding: 8px 8px 10px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 0 #fff inset, 0 16px 34px rgba(120, 40, 110, .22);
  cursor: pointer;
  rotate: -3deg;
  opacity: 0;
  transition: transform .25s var(--ease-pop);
}
.finale .fin-photo.is-in { animation: fin-photo-in .7s var(--ease-pop) both; }
@keyframes fin-photo-in { from { opacity: 0; transform: translateY(24px) scale(.7) rotate(-8deg); } to { opacity: 1; transform: none; } }
.finale .fin-photo:hover { transform: rotate(2deg) scale(1.03); }
.finale .fin-photo:focus-visible { outline: 3px dashed var(--pink-deep); outline-offset: 4px; }
.finale .fin-photo__rays {
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 214, .95), rgba(255, 200, 228, .5) 55%, transparent);
  animation: fin-breathe 3s ease-in-out infinite;
}
@keyframes fin-breathe { 50% { transform: scale(1.06); opacity: .8; } }
.finale .fin-photo__pic {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.3;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff6fb, #f3e6ff);
}
.finale .fin-photo__zoom { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 5; transform: scale(1.12); transform-origin: 50% 44.8%; }
.finale .fin-photo__zoom > .salon-scene { position: absolute; inset: 0; }
.finale .fin-photo__glass { position: absolute; overflow: hidden; border-radius: 3.2% / 3%; }
.finale .fin-photo__glass .salon-client {
  position: absolute;
  left: 50%;
  top: -1%;
  width: 104%;
  height: auto;
  translate: -50% 0;
}
.finale .fin-photo__streak {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 14%, rgba(255, 255, 255, .35) 15%, rgba(255, 255, 255, .06) 24%, transparent 25%);
}
.finale .fin-photo__doll { width: 90%; height: auto; margin: 6% auto 0; }
.finale .fin-photo__cap { color: var(--ink-2); font-size: .56rem; }

/* ---------- the receipt ---------- */
.finale .fin-receipt {
  position: relative;
  width: 100%;
  max-width: 330px;
  justify-self: center;
  container-type: inline-size;
  container-name: receipt;
}
.finale .fin-printer {
  position: relative;
  z-index: 2;
  height: 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, #7a5a9e 0%, #4a2f66 55%, #2b1531 100%);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .4) inset, 0 8px 16px rgba(60, 20, 70, .3);
}
.finale .fin-printer__slot {
  position: absolute;
  left: 7%; right: 7%;
  bottom: 5px;
  height: 4px;
  border-radius: 4px;
  background: #140916;
}
.finale .fin-printer__led {
  position: absolute;
  left: 12px; top: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7fd8a8;
  box-shadow: 0 0 6px #7fd8a8;
}
.finale .fin-receipt.is-printing .fin-printer__led { background: var(--pink); box-shadow: 0 0 8px var(--pink); animation: spa-blink .3s steps(2) infinite; }
.finale .fin-paper__clip {
  position: relative;
  z-index: 1;
  margin: -6px 9% 0;
  padding-bottom: 14px;
  overflow: hidden;
}
.finale .fin-paper {
  position: relative;
  padding: 14px 13px 12px;
  background:
    linear-gradient(180deg, rgba(60, 20, 70, .08), transparent 14px),
    #fffdf9;
  color: var(--ink);
  font: 600 .78rem/1.3 var(--font-body);
  text-align: left;
  box-shadow: 0 10px 20px rgba(110, 40, 100, .14);
  transform: translateY(-101%);
}
.finale .fin-paper::after { /* zig-zag tear */
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -9px;
  height: 9px;
  background:
    linear-gradient(135deg, #fffdf9 50%, transparent 50%) 0 0 / 14px 9px repeat-x,
    linear-gradient(-135deg, #fffdf9 50%, transparent 50%) 0 0 / 14px 9px repeat-x;
}
.finale .fin-receipt.is-printing .fin-paper { transform: none; transition: transform 2.6s steps(26, end); }
.finale .fin-receipt.is-done .fin-paper { transform: none; }
.finale .fin-line { opacity: 0; transition: opacity .25s ease; }
.finale .fin-line.is-in { opacity: 1; }
.finale .fin-paper__head { text-align: center; padding-bottom: 6px; }
.finale .fin-paper__brand { font: italic 800 1.02rem/1.1 var(--font-display); color: var(--ink); }
.finale .fin-paper__meta { color: var(--ink-3); font-size: .5rem; margin-top: 3px; }
.finale .fin-paper__label {
  margin: 6px 0 5px;
  padding-top: 6px;
  border-top: 2px dashed #ead8ec;
  color: var(--pink-deep);
  font-size: .52rem;
}
.finale .fin-rows { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.finale .fin-row { display: grid; grid-template-columns: 24px auto minmax(8px, 1fr) 18px; align-items: center; gap: 7px; }
.finale .fin-row__icon {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f5efff, #e4d8ff);
  color: #7b5cd6;
}
.finale .fin-row__icon svg { width: 15px; height: 15px; }
.finale .fin-row__main { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.finale .fin-row__step { font-weight: 700; font-size: .78rem; white-space: nowrap; }
.finale .fin-row__step b { font: 400 .56rem var(--font-pixel); color: var(--pink-deep); letter-spacing: .06em; }
.finale .fin-row__badge { font: italic 600 .74rem/1.2 var(--font-display); color: var(--ink-2); }
.finale .fin-row__dots { align-self: end; margin-bottom: .45em; border-bottom: 2px dotted #dcc8e2; }
.finale .fin-row__tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--pink); color: #fff; }
.finale .fin-row__tick svg { width: 11px; height: 11px; }
.finale .fin-packs { display: flex; justify-content: center; align-items: flex-end; gap: 12px; height: 46px; }
.finale .fin-pack { height: 100%; display: flex; align-items: flex-end; }
.finale .fin-pack:nth-child(2) { height: 80%; }
.finale .fin-pack:nth-child(3) { height: 72%; }
.finale .fin-pack:nth-child(4) { height: 88%; }
.finale .fin-pack__art { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 4px 4px rgba(80, 40, 120, .2)); }
.finale .fin-total { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 2px dashed #ead8ec; }
.finale .fin-total .pixel { font-size: .56rem; color: var(--ink-2); }
.finale .fin-total strong { font-weight: 700; font-size: .82rem; color: var(--pink-deep); }
.finale .fin-thanks { margin-top: 8px; text-align: center; font-style: italic; font-size: 1.22rem; color: var(--pink-deep); }
.finale .fin-barcode { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 6px; }
.finale .fin-barcode span:first-child {
  width: 70%;
  height: 20px;
  background: repeating-linear-gradient(90deg, #2b1531 0 2px, transparent 2px 4px, #2b1531 4px 5px, transparent 5px 8px, #2b1531 8px 11px, transparent 11px 13px, #2b1531 13px 14px, transparent 14px 17px);
  opacity: .85;
}
.finale .fin-barcode .pixel { color: var(--pink-2); font-size: .5rem; letter-spacing: .5em; }
@container receipt (max-width: 230px) {
  .finale .fin-paper { padding: 12px 10px 10px; }
  .finale .fin-row { grid-template-columns: auto minmax(4px, 1fr) 16px; gap: 5px; }
  .finale .fin-row__icon { display: none; }
  .finale .fin-row__step { font-size: .72rem; }
  .finale .fin-row__badge { font-size: .68rem; }
  .finale .fin-row__tick { width: 16px; height: 16px; }
  .finale .fin-packs { gap: 7px; height: 42px; }
  .finale .fin-thanks { font-size: 1.1rem; }
}

/* ---------- the track: 5 ✓ and a locked sixth ---------- */
.finale .fin-next { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2cqh, 16px); min-width: 0; }
.finale .fin-trackwrap { width: 100%; max-width: 440px; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s var(--ease-out); }
.finale .fin-trackwrap.is-in { opacity: 1; transform: none; }
.finale .fin-track__label { color: var(--ink-3); font-size: .56rem; margin-bottom: 8px; }
.finale .fin-trackbox { position: relative; padding: 0 4px; }
.finale .fin-track__rail {
  position: absolute;
  left: 26px; right: 30px;
  top: 17px;
  height: 8px;
  border-radius: 99px;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(120, 40, 110, .2), 0 0 0 2px rgba(255, 255, 255, .8);
}
.finale .fin-track__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink-2), var(--pink), var(--lilac));
  transition: width 1s var(--ease-out);
}
.finale .fin-trackwrap.is-in .fin-track__fill { width: 80%; }
.finale .fin-track__dash {
  position: absolute;
  left: 80%; right: 0;
  top: 50%;
  height: 0;
  border-top: 3px dashed #e8c066;
  translate: 0 -50%;
  opacity: 0;
  transition: opacity .4s ease .6s;
}
.finale .fin-trackwrap.is-full .fin-track__dash { opacity: 1; }
.finale .fin-track { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.finale .fin-node { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 42px; }
.finale .fin-node__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--chrome);
  box-shadow: 0 3px 0 #b3a8c6, 0 6px 12px rgba(120, 40, 110, .15);
  color: var(--lilac);
  transition: background .3s ease, box-shadow .3s ease;
}
.finale .fin-node__icon { width: 58%; height: 58%; }
.finale .fin-node__icon svg { width: 100%; height: 100%; }
.finale .fin-node__tick { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; }
.finale .fin-node__tick svg { width: 20px; height: 20px; }
.finale .fin-node.is-done .fin-node__dot { background: linear-gradient(180deg, #ffb3d6, var(--pink)); box-shadow: 0 3px 0 var(--pink-deep), 0 6px 14px rgba(255, 95, 168, .45); animation: spa-pop-in .45s var(--ease-pop); }
.finale .fin-node.is-done .fin-node__icon { opacity: 0; }
.finale .fin-node.is-done .fin-node__tick { opacity: 1; }
.finale .fin-node__num { color: var(--ink-3); font-size: .54rem; }
.finale .fin-node__title { display: none; }
.finale .fin-node--next { width: 50px; opacity: 0; transform: scale(.5); transition: opacity .4s ease, transform .6s var(--ease-pop); }
.finale .fin-node--next.is-in { opacity: 1; transform: none; }
.finale .fin-lock {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-top: -4px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffaf0, #ffe9a8 60%, #f2c95e);
  box-shadow: 0 0 0 2px #e8c066, 0 0 22px 6px rgba(255, 215, 106, .75), 0 6px 14px rgba(150, 100, 20, .3);
  cursor: pointer;
  animation: fin-lockglow 1.8s ease-in-out infinite;
}
@keyframes fin-lockglow { 50% { box-shadow: 0 0 0 2px #ff8cc4, 0 0 34px 12px rgba(255, 140, 196, .6), 0 6px 14px rgba(150, 100, 20, .3); } }
.finale .fin-lock:focus-visible { outline: 3px dashed var(--pink-deep); outline-offset: 5px; }
.finale .fin-lock__ring { position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed rgba(232, 192, 102, .9); animation: spa-spin 9s linear infinite; }
.finale .fin-lock__icon { width: 26px; height: 30px; }
.finale .fin-lock__icon svg { width: 100%; height: 100%; }
.finale .fin-lock.is-jiggle .fin-lock__icon { animation: spa-shake .42s var(--ease-out); }
.finale .fin-lock.is-jiggle .fin-lock__shackle { animation: fin-shackle .42s ease-in-out; }
@keyframes fin-shackle { 40% { transform: translateY(-3px); } }
.finale .fin-node__next { display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; line-height: 1.05; }
.finale .fin-node__next .pixel { font-size: .5rem; color: #b07a12; }
.finale .fin-node__next strong { font-size: .92rem; font-style: italic; color: var(--ink); }

.finale .fin-nextline {
  max-width: 18ch;
  margin: 0;
  font-style: italic;
  font-size: clamp(1.45rem, min(3.4cqw, 5.2cqh), 2.3rem);
  line-height: 1.08;
  background: linear-gradient(180deg, #ff4f8f 0%, #d61f63 60%, #a50f48 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .9));
  opacity: 0;
  text-wrap: balance;
}
.finale .fin-nextline.is-in { animation: fin-rise .8s var(--ease-out) both; }
@keyframes fin-rise { from { opacity: 0; transform: translateY(12px); letter-spacing: .06em; filter: blur(3px); } to { opacity: 1; transform: none; } }
.finale .fin-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s var(--ease-out); }
.finale .fin-actions.is-in { opacity: 1; transform: none; }
.finale .fin-again { white-space: nowrap; }
.finale .fin-again span { font-size: 1.15em; }
.finale .fin-contacts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.finale .fin-contacts__label { color: var(--ink-3); font-size: .54rem; }
.finale .fin-contact { text-decoration: none; min-height: 36px; }
.finale .fin-contact__k { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lilac-2); color: #5b3fb0; font-size: .7rem; font-weight: 700; }

/* ---------- wide stages: three columns ---------- */
@container stage (min-aspect-ratio: 5/4) {
  .finale .fin-body {
    grid-template-columns: minmax(0, .78fr) minmax(0, .9fr) minmax(0, 1.12fr);
    grid-template-areas: "head head head" "photo receipt next";
    align-items: center;
    gap: clamp(10px, 2cqh, 20px) clamp(14px, 2.6cqw, 36px);
  }
  .finale .fin-photo { max-width: min(290px, 38cqh); }
}
/* short stages (phone landscape): title beside the receipt, receipt feeds upward */
@container stage (max-height: 460px) {
  .finale .fin-wrap { padding: 8px 14px 10px; justify-content: flex-start; min-height: 100%; }
  .finale .fin-body {
    grid-template-columns: minmax(0, .62fr) minmax(0, .95fr) minmax(0, 1.25fr);
    grid-template-areas: "photo receipt head" "photo receipt next";
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 6px 14px;
    height: calc(100cqh - 18px);
  }
  .finale .fin-photo { align-self: center; }
  .finale .fin-receipt { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
  .finale .fin-paper__clip { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .finale .fin-paper__clip::-webkit-scrollbar { display: none; }
  .finale .fin-paper { transform: none; }
  .finale .fin-kicker { display: none; }
  .finale .fin-title { font-size: clamp(1.2rem, 8cqh, 1.9rem); }
  .finale .fin-name { font-size: .8rem; letter-spacing: .26em; }
  .finale .fin-photo { max-width: 170px; padding: 6px 6px 7px; }
  .finale .fin-photo__cap { display: none; }
  .finale .fin-paper { font-size: .72rem; padding: 10px 10px 10px; }
  .finale .fin-packs { height: 38px; }
  .finale .fin-thanks { font-size: 1.05rem; margin-top: 6px; }
  .finale .fin-barcode span:first-child { height: 16px; }
  .finale .fin-next { gap: 8px; align-self: center; }
  .finale .fin-track__label { display: none; }
  .finale .fin-nextline { font-size: clamp(1.1rem, 7cqh, 1.55rem); }
  .finale .fin-again { min-height: 46px; padding: .7em 1.4em; font-size: 1rem; }
  .finale .fin-node, .finale .fin-node__dot { width: 34px; }
  .finale .fin-node__dot { height: 34px; }
  .finale .fin-node__tick svg { width: 17px; height: 17px; }
  .finale .fin-track__rail { top: 13px; left: 20px; }
  .finale .fin-lock { width: 44px; height: 44px; }
}
/* narrow phones: the track becomes a vertical checklist under the snapshot */
@container stage (max-width: 520px) and (min-height: 461px) {
  .finale .fin-wrap { padding: 12px 10px 16px; justify-content: flex-start; }
  .finale .fin-body {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    grid-template-areas: "head head" "photo receipt" "track receipt" "line line" "act act";
    grid-template-rows: auto auto 1fr auto auto;
    gap: 10px 10px;
  }
  .finale .fin-next { display: contents; }
  .finale .fin-trackwrap { grid-area: track; align-self: start; padding: 4px 0 0 4px; text-align: left; }
  .finale .fin-nextline { grid-area: line; justify-self: center; font-size: clamp(1.4rem, 7.4cqw, 1.9rem); max-width: 16ch; }
  .finale .fin-actions { grid-area: act; }
  .finale .fin-name { letter-spacing: .24em; padding-left: .24em; }
  .finale .fin-photo { padding: 5px 5px 7px; rotate: -2deg; margin-top: 8px; }
  .finale .fin-photo__cap { font-size: .48rem; }
  .finale .fin-paper__clip { margin-left: 5%; margin-right: 5%; }
  .finale .fin-again { font-size: 1.02rem; padding: .85em 1.5em; }

  .finale .fin-track__label { margin-bottom: 8px; }
  .finale .fin-trackbox { padding: 0; }
  .finale .fin-track { flex-direction: column; align-items: stretch; gap: 7px; }
  .finale .fin-node { flex-direction: row; width: auto; gap: 8px; }
  .finale .fin-node__dot { width: 32px; height: 32px; flex: none; }
  .finale .fin-node__tick svg { width: 16px; height: 16px; }
  .finale .fin-node__num { display: none; }
  .finale .fin-node__title { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-2); line-height: 1.1; text-align: left; }
  .finale .fin-node.is-done .fin-node__title { color: var(--ink); }
  .finale .fin-node--next { width: auto; gap: 8px; margin-top: 4px; }
  .finale .fin-lock { width: 44px; height: 44px; margin: 0 0 0 -6px; flex: none; }
  .finale .fin-lock__icon { width: 22px; height: 26px; }
  .finale .fin-node__next { align-items: flex-start; }
  .finale .fin-track__rail { left: 13px; right: auto; top: 22px; bottom: 34px; width: 6px; height: auto; }
  .finale .fin-track__fill { width: 100% !important; height: 0; right: 0; bottom: auto; transition: height 1s var(--ease-out); }
  .finale .fin-trackwrap.is-in .fin-track__fill { height: 78%; }
  .finale .fin-track__dash { left: 50%; right: auto; top: 78%; bottom: 0; height: auto; width: 0; border-top: 0; border-left: 3px dashed #e8c066; translate: -50% 0; }
}
@container stage (max-width: 380px) and (min-height: 461px) {
  .finale .fin-title { font-size: 1.7rem; }
  .finale .fin-node__title { font-size: .66rem; }
}

/* reduced motion: everything simply appears */
html.reduce-motion .finale .fin-paper { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .finale .fin-paper { transform: none; }
  .finale .fin-bg__rays { animation: none; }
}