/* After Finish. Built on the parts in mq.css and the task-mode parts in mq-quiz.css.
   Paper finished (the Finish board): rich, over the buddy's habitat, its own page with no header.
   Putting them right (the FixMistakes board), See my answers and Answers checked: task mode, the question screens' warm paper. */

/* ---- Paper finished: the stars land first and nothing else moves until they have; then the star path, putting them right,
   and two quiet links. */
body[data-route="results"] #app{max-width:none;padding:0}
.fn{position:relative;isolation:isolate;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#050817;color:var(--ivory)}
.fn>.ui-scene{z-index:-3;background:#050817}
.fn>.ui-scene .ui-scene-img{object-position:center 42%}
.fn>.ui-scene .ui-scene-img.is-in{opacity:.46}
.fn-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,23,.76) 0%,rgba(5,8,23,.5) 24%,rgba(5,8,23,.9) 60%,#050817 100%)}
.fn-glow{position:absolute;left:50%;top:38%;z-index:-1;width:940px;height:520px;margin:-260px 0 0 -470px;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(232,196,106,.26) 0%,rgba(232,196,106,.05) 46%,rgba(232,196,106,0) 70%)}
.fn-main{flex:1 1 auto;width:100%;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px clamp(16px,4.4vw,56px) 48px;text-align:center}
.fn-stars{margin:0;display:flex;gap:14px}
.fn-star{width:116px;height:116px;fill:none;stroke:rgba(255,250,240,.26);stroke-width:1.3;stroke-linejoin:round;animation:fn-dim .5s ease-out .95s both}
.fn-star.is-on{fill:var(--gold);stroke:none;filter:drop-shadow(0 0 28px rgba(232,196,106,.65));animation:fn-land .6s cubic-bezier(.2,1.7,.4,1) both;animation-delay:calc(.15s + var(--i) * .35s)}
@keyframes fn-land{from{transform:scale(2.6) rotate(-32deg);opacity:0}to{transform:none;opacity:1}}
@keyframes fn-dim{from{opacity:0}to{opacity:1}}
.fn-h{margin:22px 0 0;font:700 54px/1.02 var(--fH);letter-spacing:-.012em}
.fn-h:focus{outline:0}
.fn-sub{margin:10px 0 0;font:400 20px/1.4 var(--fD);color:#c9d2ee;text-shadow:0 1px 14px rgba(5,8,23,.95)}
.fn-wait{margin:8px 0 0;max-width:46ch;font:600 17px/1.45 var(--fD);color:var(--gold2)}
.fn-row{animation:fn-rise .55s cubic-bezier(.2,.9,.3,1) both}
.fn-r1{animation-delay:1s}.fn-r2{animation-delay:1.6s}.fn-r3{animation-delay:1.9s}
@keyframes fn-rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
/* Where those stars went: the path to the next pack, the new ones dropping in */
/* Her own star numbers to the next pack, then the pack (PAPER_HOME.trail); the stars this try won pop in last */
@keyframes fn-pop{from{transform:scale(0) translateY(-34px);opacity:0}to{transform:none;opacity:1}}
.fn-open{margin-top:14px;min-height:60px;display:inline-flex;align-items:center;padding:0 34px;border:1px solid #e6bf66;border-radius:999px;background:linear-gradient(180deg,#ffe9ad,#f1cc70 72%,#e9ba5f);color:var(--ink);font:700 21px/1.2 var(--fD);cursor:pointer;box-shadow:inset 0 2px #fff6d2,0 5px 0 rgba(154,107,41,.4);transition:transform 110ms,box-shadow 140ms}
.fn-open:hover{box-shadow:inset 0 2px #fff6d2,0 5px 0 rgba(154,107,41,.4),0 0 0 5px rgba(255,255,255,.28)}
/* The one gold button: the best next step (the No stars yet board, Jon 27 Oct) */
.fn-next{margin:26px 0 0;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:10px}
.fn-next .fn-open{margin-top:0;min-height:64px;justify-content:center;padding:0 40px;text-decoration:none;font-weight:800}
.fn-open:active{transform:translateY(2px)}
@media (max-width:639px){
.fn-main{padding-top:40px}
.fn-stars{gap:8px}
.fn-star{width:76px;height:76px}
.fn-h{font-size:42px}
.fn-sub{font-size:18px}
.fn-next .fn-open{width:100%}
.fn-glow{width:560px;height:420px;margin:-210px 0 0 -280px;top:38%}
}
@media (prefers-reduced-motion:reduce){
.fn-star,.fn-star.is-on,.fn-row{animation:none}
.fn-open{transition:none}
.fn-open:active{transform:none}
}

/* ---- See my answers and Answers checked: a task header like the exam's */
.fx-task .qz-bar-in{grid-template-columns:auto minmax(0,1fr) auto}
.fx-bar .qz-bar-in>.mq-btn2{grid-column:-2;justify-self:end}
.fx-task .qz-body{padding-bottom:var(--s7)}

/* Stars: gold when won, outlined when not; they pop in once */
.fx-stars{display:flex;justify-content:center;gap:10px}
.fx-star{width:52px;height:52px;fill:rgba(255,255,255,.12);stroke:var(--gold);stroke-width:1.2;stroke-linejoin:round}
.fx-star.is-on{fill:var(--gold);stroke:#fff3c4;animation:fx-pop .55s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.2s + var(--i) * 200ms)}
@keyframes fx-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.fx-stars.is-small{justify-content:flex-start;gap:4px}
.fx-stars.is-small .fx-star{width:26px;height:26px;animation:none}

/* Answers checked */
.ck-sheet{width:100%;max-width:880px;margin:var(--s3) auto var(--s7);padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:var(--s4)}
.ck-h{margin:0;font:600 clamp(28px,3vw,38px)/1.2 var(--fH);color:var(--ink)}
.ck-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--s3)}
.ck-item{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--rK);border:2px solid}
.ck-item.is-ok{background:var(--okTint);border-color:var(--okLine);color:var(--ok)}
.ck-item.is-ans{background:var(--ansTint);border-color:#9d8ef0;color:var(--ans)}
.ck-mark{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#fff}
.ck-mark svg{width:22px;height:22px}
.ck-say{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.ck-say b{font:700 18px/1.4 var(--fR);overflow-wrap:anywhere}
.ck-you{font:600 16px/1.3 var(--fD);color:var(--ink2)}
.ck-ink{width:100%;max-width:300px;aspect-ratio:8/3;object-fit:contain;border-radius:var(--rF);background:#fff;border:1px solid var(--hair)}
.ck-typed{font:700 24px/1.3 var(--fR);color:var(--ink);overflow-wrap:anywhere}
.ck-score{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s4);padding:var(--s3) var(--s4);border-radius:var(--rK);background:var(--sage)}
.ck-now{display:flex;flex-direction:column;gap:4px}
.ck-big{margin:0;display:flex;align-items:baseline;gap:8px;line-height:1}
.ck-big b{font-size:56px;font-weight:800;color:var(--ink)}
.ck-big>span{font-size:32px;color:var(--ink2)}
.ck-big>span>span[aria-hidden]{margin-right:6px}
.ck-label{font:600 16px/1.3 var(--fD);color:var(--ink2)}
.ck-stars{gap:6px}
.ck-stars .fx-star{width:44px;height:44px;fill:#e1e7e2;stroke:#8c6a2e;animation:none}
.ck-stars .fx-star.is-on{fill:var(--gold);stroke:#8a6410}
.ck-act{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* See my answers */
.an-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0}
.an-h{margin:0;font:600 clamp(28px,3vw,38px)/1.2 var(--fH);color:var(--ink)}
.an-list{list-style:none;margin:0;padding:0 0 var(--s7);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:var(--s3);align-items:start}
.an-item{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);min-width:0;padding:var(--s4) var(--s5)}
.an-item.is-missed{box-shadow:inset 4px 0 0 #9d8ef0,var(--shadowLight)}
.an-top{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2)}
.an-n{font:600 17px/1.3 var(--fD);color:var(--ink2)}
.an-q{margin:0;font:700 20px/1.45 var(--fR);color:var(--ink);overflow-wrap:anywhere}
.an-a,.an-fix{margin:0;font:400 19px/1.5 var(--fR);color:var(--ink2);overflow-wrap:anywhere}
.an-a span{font-weight:700;color:var(--ink)}
.an-fix{color:var(--ink)}
.an-fix>span:first-child{font-weight:700;color:var(--ans)}
.an-why{color:var(--ink2)}
.an-wait{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:var(--rK);background:var(--laterTint);color:var(--later);font:600 17px/1.4 var(--fD)}
.an-wait svg{width:20px;height:20px;flex:0 0 auto}
.an-ink{width:100%;max-width:320px;aspect-ratio:8/3;object-fit:contain;border-radius:var(--rF);background:#fff;border:1px solid var(--hair)}
.an-item .mq-btn2{margin-top:var(--s1)}

@media (max-width:639px){
.an-item{padding:var(--s4)}
.ck-act>*{flex:1 1 100%}
.fx-star{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.fx-star.is-on{animation:none}}

/* To learn from (the AnswersFirstB board): a card for each one that went wrong or was skipped, then the gold See your stars */
.ln-head{padding:var(--s3) 0}
.ln-h{margin:0;font:700 clamp(28px,3vw,38px)/1.15 var(--fH);color:var(--ink)}
.ln-h:focus{outline:0}
.ln-sub{margin:6px 0 0;font:400 18px/1.4 var(--fD);color:var(--ink2)}
.ln-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:var(--s3);align-items:start}
.ln-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:var(--s4)}
.ln-n{margin:0;font:700 14px/1.3 var(--fD);color:var(--ink2)}
.ln-q{margin:0;font:700 20px/1.4 var(--fR);color:var(--ink);overflow-wrap:anywhere}
.ln-fig{margin:0}
.ln-fig img{display:block;max-width:100%;max-height:220px;object-fit:contain}
.ln-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
.ln-pair p{margin:0;padding:8px 10px;border-radius:10px;font:400 14px/1.3 var(--fD);overflow-wrap:anywhere}
.ln-pair b{display:block;margin-top:2px;font:700 20px/1.3 var(--fR);color:var(--ink)}
.ln-mine{background:var(--laterTint);color:var(--later)}
.ln-key{background:var(--okTint);color:var(--ok)}
.ln-act{position:sticky;bottom:0;margin:var(--s4) 0 0;padding:var(--s3) 0 var(--s5);display:flex;justify-content:center;background:linear-gradient(180deg,rgba(230,223,207,0),#e6dfcf 30%)}
.ln-go{min-height:60px;width:min(100%,420px);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 32px;border:1px solid #e6bf66;border-radius:999px;background:linear-gradient(180deg,#ffe9ad,#f1cc70 72%,#e9ba5f);color:var(--ink);font:800 20px/1.2 var(--fD);cursor:pointer;box-shadow:inset 0 2px #fff6d2,0 5px 0 rgba(154,107,41,.4)}
.ln-go .ui-icon{width:22px;height:22px}
.ln-go:active{transform:translateY(2px)}
.ln-go:focus-visible{outline:3px solid #263b73;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.ln-go:active{transform:none}}