/* The final ceremony is isolated from activity-card and reward-page styles. */
.finale-page{--finale-gold:#ffe6af;--finale-ink:#091829;max-width:1500px;margin:0 auto;padding:20px 24px 42px;color:#fff4da}
.finale-theatre{position:relative;isolation:isolate;overflow:hidden;border:1px solid #b8955d85;border-radius:28px;background:#091628;box-shadow:0 18px 70px #02091655}
.finale-toolbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid #c7a56830;background:linear-gradient(110deg,#15293b,#101a2e)}
.finale-kicker{margin:0;color:#e6c78f;font-size:12px;letter-spacing:.2em;font-weight:800}
.finale-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}
.finale-control{min-height:44px;padding:10px 16px;border:1px solid #ddc18c60;border-radius:30px;background:#0d1a2bbd;color:#ffedc8;font:inherit;font-size:14px;cursor:pointer}
.finale-control:hover{background:#30435c;border-color:#ffe3a1}
.finale-control:focus-visible,.finale-actions button:focus-visible{outline:3px solid #aeeeff;outline-offset:3px}
.finale-control[hidden]{display:none}
.finale-stage{position:relative;isolation:isolate;overflow:hidden;height:clamp(510px,calc(100svh - 180px),950px);background:radial-gradient(ellipse at 50% 43%,#152c54,#091427 70%)}
.finale-panorama{position:absolute;inset:0;z-index:0}
.finale-panorama img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none}
.finale-awake{opacity:0}
.finale-zone-castle{mask-image:radial-gradient(ellipse 29% 67% at 50% 49%,#000 58%,transparent 100%)}
.finale-zone-garden{mask-image:radial-gradient(ellipse 32% 45% at 22% 65%,#000 60%,transparent 100%)}
.finale-zone-dome{mask-image:radial-gradient(ellipse 26% 54% at 79% 49%,#000 55%,transparent 100%)}
.finale-vignette{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#071323f5,transparent 33%,#0713230a 65%,#07132366),linear-gradient(90deg,#07132350,transparent 20%,transparent 80%,#07132350);pointer-events:none}
.finale-vials,.finale-motes,.finale-comets{position:absolute;inset:0;pointer-events:none}
.finale-vials{z-index:4}
.finale-vial{position:absolute;transform:translate(-50%,-50%);width:clamp(76px,8.8vw,122px);height:clamp(76px,8.8vw,122px);opacity:0}
.finale-vial-float{position:relative;width:100%;height:100%;display:grid;place-items:center;will-change:transform}
.finale-vial .potion-display{--size:100%;width:100%;height:100%;max-width:none;filter:drop-shadow(0 5px 8px #020817cc)}
.finale-vial-halo{position:absolute;inset:-20%;border-radius:50%;opacity:0;background:radial-gradient(ellipse,var(--vial-color),transparent 64%);filter:blur(12px);mix-blend-mode:screen}
.finale-vial[data-level="24"] .finale-vial-halo{inset:-36%;background:radial-gradient(ellipse,#f0d8ff 0%,#a9dfff77 35%,transparent 67%)}
.finale-vial .potion-charm{filter:drop-shadow(0 2px 1px #0009)}
.finale-beams{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.finale-beam,.finale-beam-glow{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.finale-beam{stroke-width:2}
.finale-beam-glow{stroke-width:9;filter:blur(5px)}
.finale-heart{position:absolute;z-index:3;left:50%;top:45%;width:clamp(110px,17vw,225px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.finale-galaxy{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at center,#fffbea 0 3%,#bdedff99 12%,transparent 44%),repeating-conic-gradient(from 20deg,#8de6ff00 0deg,#ccadffbb 35deg,#defbffdd 48deg,#849fff00 80deg,#8de6ff00 120deg);box-shadow:0 0 35px #acdaff70,0 0 90px #b7a0ff55;mask-image:radial-gradient(circle,#000 8%,#0008 53%,transparent 72%);filter:blur(1px)}
.finale-galaxy:before{content:'';position:absolute;inset:18%;border-radius:50%;background:repeating-conic-gradient(from 130deg,transparent 0deg,#fffceaaa 25deg,#d6b3ffbb 40deg,transparent 90deg);transform:rotate(30deg);filter:blur(3px)}
.finale-heart-core{position:absolute;inset:37%;border-radius:50%;background:radial-gradient(ellipse,#fffced,#c8f3ff 35%,#b8acff44 67%,transparent);box-shadow:0 0 24px #f8e7ba99}
.finale-heart-orbit{position:absolute;inset:-10%;border:1px solid #ffebb96b;border-radius:50%;box-shadow:0 0 20px #b6d9ff33}
.finale-heart-orbit:before,.finale-heart-orbit:after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#fff0c5;box-shadow:0 0 12px #fff1cb;left:12%;top:15%}
.finale-heart-orbit:after{left:83%;top:81%;width:4px;height:4px}
.finale-wave{position:absolute;z-index:3;left:50%;top:45%;width:clamp(130px,20vw,280px);aspect-ratio:1;opacity:0;border:2px solid #fbe5b570;border-radius:50%;background:radial-gradient(circle,transparent 45%,#bddaff18 65%,#fff1c22b 70%,transparent 73%);box-shadow:0 0 32px #e4c9ff44,inset 0 0 28px #baeaff22;pointer-events:none}
.finale-wave-second{border-color:#abedff50}
.finale-constellations{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;pointer-events:none}
.finale-constellations path{fill:none;stroke:#ffe5a5;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.finale-constellations circle{fill:#ffebba;filter:drop-shadow(0 0 5px #ffdc87)}
.finale-motes{z-index:5}
.finale-mote{position:absolute;width:4px;height:4px;opacity:0;border-radius:50%;background:#fff4d7;box-shadow:0 0 8px 2px var(--mote-color)}
.finale-mote:nth-child(3n){width:3px;height:3px}
.finale-mote:nth-child(7n){width:8px;height:8px;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.finale-comets{z-index:3;overflow:hidden}
.finale-comet{position:absolute;left:105%;width:170px;height:3px;opacity:0;transform:rotate(-17deg);transform-origin:left center;border-radius:50%;background:linear-gradient(90deg,#fff3c6,#efd18a99 18%,#beeaff44 60%,transparent);filter:drop-shadow(0 0 5px #f9e0a1)}
.finale-comet:before{content:'';position:absolute;left:0;top:-2px;width:7px;height:7px;background:#fff3da;border-radius:50%;box-shadow:0 0 10px #ffe5a9}
.finale-comet-1{width:115px;height:2px}
.finale-comet-2{width:140px;height:2px}
.finale-caption{position:absolute;z-index:6;bottom:4%;left:5%;right:5%;text-align:center;pointer-events:none;text-shadow:0 3px 24px #000b}
.finale-caption-label{font-size:10px;letter-spacing:.2em;color:#e5c993;font-weight:800;margin:0 0 12px}
.finale-caption h1{color:#fff1d0;font-size:clamp(26px,3.4vw,49px);font-weight:500;line-height:1.12;margin:0 0 12px;outline:none}
.finale-caption #finaleSubtitle{color:#e2e9f5;font-size:clamp(15px,1.45vw,20px);line-height:1.5;margin:0 auto;max-width:680px}
.finale-progress{height:2px;background:#6e6a6822}
.finale-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#83d9ff,#cfb7ff,#ffde93);box-shadow:0 0 10px #d6d1ff}
.finale-result{padding:26px 0 8px;text-align:center}
.finale-result[hidden]{display:none}
.finale-result-intro{font-size:calc(var(--reading,19px) + 1px);line-height:1.7;max-width:760px;margin:0 auto 24px;color:#e1e9e7}
.finale-actions{margin-bottom:32px;gap:14px}
.finale-page .diploma{max-width:800px;margin:0 auto;padding:34px 30px;background:radial-gradient(ellipse at top,#fffef5,#f0e4c7);border:1px solid #ddc080;border-radius:24px;box-shadow:inset 0 0 0 7px #fff8e3,inset 0 0 0 8px #d4b678}
.finale-page .diploma .sprite{filter:drop-shadow(0 5px 8px #ad8c6344)}
.finale-page[data-mode="result"] .finale-zone-all{opacity:1}
.finale-page[data-mode="result"] :is(.finale-vials,.finale-beams,.finale-heart,.finale-wave,.finale-motes,.finale-comets,.finale-constellations){display:none}
.finale-page[data-mode="result"] .finale-stage{height:clamp(380px,55vw,620px)}
.finale-page[data-mode="result"] .finale-controls{display:none}
.finale-page[data-mode="result"] .finale-caption{bottom:5%}
.finale-page[data-mode="result"] .finale-toolbar{justify-content:center}
.finale-page[data-mode="loading"] .finale-stage{background:#10213d}
body.finale-playing{padding-bottom:0}
body.finale-playing .academy-dock{display:none}
@media(max-width:700px){
 .finale-page{padding:10px 8px 25px}
 .finale-theatre{border-radius:19px}
 .finale-toolbar{padding:10px 12px;gap:8px;flex-wrap:wrap}
 .finale-kicker{font-size:10px;letter-spacing:.14em}
 .finale-controls{gap:6px;margin-left:auto}
 .finale-control{padding:8px 10px;font-size:12px}
 .finale-stage{height:clamp(740px,calc(100svh - 145px),900px)}
 .finale-panorama{inset:auto 0;top:48%;height:auto;aspect-ratio:3/2;transform:translateY(-50%)}
 .finale-panorama img{object-fit:contain}
 .finale-vignette{background:linear-gradient(0deg,#091427,transparent 34%,transparent 62%,#091427)}
 .finale-vial{width:clamp(62px,19vw,88px);height:clamp(62px,19vw,88px)}
 .finale-vial-halo{filter:blur(9px)}
 .finale-heart{top:45%;width:120px}
 .finale-wave{width:150px}
 .finale-caption{left:6%;right:6%;bottom:auto;top:61%}
 .finale-caption-label{font-size:8px;margin-bottom:8px;letter-spacing:.12em}
 .finale-caption h1{font-size:clamp(21px,5.4vw,32px);margin-bottom:7px}
 .finale-caption #finaleSubtitle{font-size:13px;line-height:1.45;max-width:350px}
 .finale-page[data-mode="result"] .finale-stage{height:450px}
 .finale-page[data-mode="result"] .finale-panorama{top:36%}
 .finale-page[data-mode="result"] .finale-caption{top:auto;bottom:7%}
 .finale-page[data-mode="result"] .finale-caption h1{font-size:30px}
 .finale-result{padding:22px 10px 0}
 .finale-result-intro{font-size:var(--reading,19px);line-height:1.65}
 .finale-actions{display:grid;grid-template-columns:1fr;width:100%;max-width:400px;margin:0 auto 28px}
 .finale-actions button{white-space:normal}
 .finale-page .diploma{padding:28px 18px}
 .finale-page .diploma h2{font-size:29px}
}
@media(max-height:550px) and (min-width:701px){
 .finale-stage{height:510px}
}
@media print{
 body{background:white!important;padding:0!important}
 .finale-page{max-width:none;padding:0;color:#1c2830}
 .finale-page .finale-theatre,.finale-page .finale-actions,.finale-result-intro{display:none!important}
 .finale-page .finale-result{display:block!important;padding:0}
 .finale-page .diploma{box-shadow:none;border:2px solid #ad8c4e;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* A defined spiral and a glass-like rim give the heart a readable silhouette. */
.finale-heart:before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid #d9e9ff77;background:radial-gradient(ellipse at 28% 22%,#e1f7ff22,transparent 38%),radial-gradient(circle,#24236940,#659dda22 60%,#c6b8ff33 72%,transparent);box-shadow:inset 0 0 22px #b7ccff33,0 0 22px #aca2ff33}
.finale-galaxy>svg{position:absolute;inset:5%;width:90%;height:90%;overflow:visible}
.finale-galaxy>svg path{fill:none;stroke:url(#finaleSpiralTint);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 3px #c7d9ff)}

/* The last potion can be decorated after its automatic awakening ceremony. */
.finale-keepsake{max-width:700px;margin:36px auto;padding:24px 16px;border:1px solid #ddc18c40;border-radius:24px;background:#152c3555;text-align:center}
.finale-keepsake h2{margin:0 0 16px;font-size:clamp(25px,4vw,34px)}
.finale-keepsake-bottle>.potion-display{--size:240px;max-width:100%}
.finale-keepsake .decoration-choice{margin-bottom:0}
@media(max-width:420px){.finale-keepsake{padding:20px 8px}.finale-keepsake-bottle>.potion-display{--size:210px}}
@media print{.finale-page .finale-keepsake{display:none!important}}