.completion-result[hidden], .completion-result__review[hidden], .completion-result__extra[hidden] { display: none !important; }
body.completion-result-open { overflow: hidden; }
.completion-result {
    --result-accent: #57c7ff;
    --result-soft: #57c7ff33;
    position: fixed;
    z-index: 99990;
    inset: 0;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: max(1.25rem, env(safe-area-inset-top)) 1.1rem max(1.25rem, env(safe-area-inset-bottom));
    background: #17232b;
    color: #f6fbff;
    isolation: isolate;
    font-family: Nunito, system-ui, sans-serif;
    animation: resultEnter .32s ease-out both;
}
.completion-result__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 29%, var(--result-soft), transparent 45%),
        radial-gradient(ellipse at 50% 100%, #ffffff0d, transparent 58%);
}
.completion-result__shell {
    width: min(100%, 36rem);
    min-height: min(46rem, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1.3rem, 4vw, 2.5rem) 0;
}
.completion-result__eyebrow {
    color: var(--result-accent);
    font-size: .8rem;
    font-weight: 1000;
    letter-spacing: .19em;
    text-transform: uppercase;
    animation: resultRise .5s .1s both;
}
.completion-result__hero {
    position: relative;
    width: clamp(10rem, 36vw, 15rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: clamp(2rem, 6vh, 4rem) auto 1.2rem;
}
.completion-result__emblem {
    width: 68%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 30%;
    background: linear-gradient(145deg, color-mix(in srgb, var(--result-accent) 83%, white), var(--result-accent));
    color: #17232b;
    box-shadow: 0 14px 0 color-mix(in srgb, var(--result-accent) 58%, black), 0 28px 55px var(--result-soft), inset 0 5px 10px #ffffff8a;
    transform: rotate(-8deg);
    animation: resultEmblem .9s cubic-bezier(.16, 1.7, .4, 1) both, resultFloat 3s 1s ease-in-out infinite;
}
.completion-result__emblem i { font-size: clamp(4rem, 14vw, 6.5rem); filter: drop-shadow(0 3px 0 #ffffff55); }
.completion-result__orbit {
    position: absolute;
    inset: 2%;
    border: 2px dashed color-mix(in srgb, var(--result-accent) 46%, transparent);
    border-radius: 50%;
    animation: resultOrbit 16s linear infinite;
}
.completion-result__orbit--two { inset: -10%; border-style: solid; border-color: transparent var(--result-accent) transparent transparent; opacity: .6; animation-duration: 7s; animation-direction: reverse; }
.completion-result__spark { position: absolute; color: var(--result-accent); font-size: 1.5rem; animation: resultSpark 2.4s ease-in-out infinite; }
.completion-result__spark--one { left: 0; top: 14%; }
.completion-result__spark--two { right: 0; top: 33%; animation-delay: .55s; }
.completion-result__spark--three { left: 14%; bottom: 0; animation-delay: 1.1s; }
.completion-result__title { margin: 0; color: #ffd33f; font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1.08; font-weight: 1000; animation: resultRise .55s .3s both; }
.completion-result__subtitle { margin: .7rem 0 0; color: #c6d3db; font-size: clamp(.95rem, 3.4vw, 1.1rem); font-weight: 800; animation: resultRise .55s .42s both; }
.completion-result__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: .75rem; margin-top: auto; padding-top: clamp(2rem, 7vh, 4rem); }
.completion-result__stat { min-width: 0; padding: .8rem .45rem 1rem; border: 3px solid var(--stat-color); border-radius: 1.35rem; box-shadow: 0 5px 0 color-mix(in srgb, var(--stat-color) 65%, black); animation: resultStat .62s both; }
.completion-result__stat:nth-child(2) { animation-delay: .12s; }
.completion-result__stat:nth-child(3) { animation-delay: .24s; }
.completion-result__stat--xp { --stat-color: #ffd33f; }
.completion-result__stat--accuracy { --stat-color: #98db45; }
.completion-result__stat--score { --stat-color: #57c7ff; }
.completion-result__stat span { display: block; margin-bottom: .65rem; color: #e4edf2; font-size: .75rem; font-weight: 1000; letter-spacing: .06em; text-transform: uppercase; }
.completion-result__stat strong { display: grid; place-items: center; min-height: 4.5rem; padding: .35rem; border-radius: .8rem; background: #233039; color: var(--stat-color); font-size: clamp(1.2rem, 4vw, 1.8rem); font-weight: 1000; overflow-wrap: anywhere; }
.completion-result__extra { margin: 1.4rem 0 0; color: #cddce7; font-weight: 900; }
.completion-result__actions { display: grid; grid-template-columns: 7rem 1fr; gap: .75rem; width: 100%; margin-top: clamp(2rem, 6vh, 3rem); animation: resultRise .5s .7s both; }
.completion-result__actions button, .completion-result__review { min-height: 3.8rem; border-radius: 1rem; font: inherit; font-weight: 1000; cursor: pointer; }
.completion-result__share { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; border: 2px solid #53636f; background: #223039; color: #57c7ff; box-shadow: 0 5px 0 #34434d; }
.completion-result__share i { font-size: 1.35rem; }
.completion-result__share span { font-size: .65rem; }
.completion-result__exit { border: 0; background: #57c7ff; color: #14232d; font-size: 1.1rem; box-shadow: 0 6px 0 #258ec1; }
.completion-result__review { margin-top: 1.4rem; padding: .7rem 1.2rem; border: 1px solid #667783; color: #e8f5ff; background: transparent; }
.completion-result button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.completion-result button:active { transform: translateY(3px); box-shadow: none; }
.completion-result[data-outcome="retry"] { --result-accent: #fb9d51; --result-soft: #fb9d5130; }
.completion-result[data-outcome="retry"] .completion-result__title { color: #ffca84; }
.completion-result[data-variant="blitz"] { --result-accent: #ffe04a; --result-soft: #ffe04a38; }
.completion-result[data-variant="duel"] { --result-accent: #f77a86; --result-soft: #f77a8633; }
.completion-result[data-variant="survival"] { --result-accent: #75d99b; --result-soft: #75d99b33; }
.completion-result[data-variant="chronology"] { --result-accent: #b99aff; --result-soft: #b99aff35; }
.completion-result[data-variant="dates"] { --result-accent: #ffc763; --result-soft: #ffc76335; }
.completion-result[data-variant="figures"] { --result-accent: #9cc8ff; --result-soft: #9cc8ff35; }
.completion-result[data-variant="terms"] { --result-accent: #9fd5ff; --result-soft: #9fd5ff35; }
.completion-result[data-variant="maps"] { --result-accent: #7cdeb9; --result-soft: #7cdeb935; }
.completion-result[data-variant="landmarks"] { --result-accent: #e6b782; --result-soft: #e6b78235; }
.completion-result[data-variant="quotes"] { --result-accent: #dfa6e8; --result-soft: #dfa6e835; }
.completion-result[data-variant="truth"] { --result-accent: #92dd6f; --result-soft: #92dd6f35; }
.completion-result[data-variant="pairs"] { --result-accent: #84d9ec; --result-soft: #84d9ec35; }
.completion-result[data-variant="matching"] { --result-accent: #b5a5fa; --result-soft: #b5a5fa35; }
.completion-result[data-variant="pick3"] { --result-accent: #ffac80; --result-soft: #ffac8035; }
.completion-result[data-variant="test"] { --result-accent: #7dc3ff; --result-soft: #7dc3ff35; }
.completion-result[data-variant="mixed"] { --result-accent: #ef9de2; --result-soft: #ef9de235; }
.completion-result[data-variant="practice"] { --result-accent: #83d892; --result-soft: #83d89235; }
.completion-result[data-variant="training"] { --result-accent: #a8dc78; --result-soft: #a8dc7835; }
.completion-result[data-variant="review"] { --result-accent: #ffa883; --result-soft: #ffa88335; }
.completion-result[data-variant="path"] { --result-accent: #ffce56; --result-soft: #ffce5635; }
.completion-result[data-variant="blitz"] .completion-result__emblem { animation: resultEmblem .7s both, resultBlitz 1.5s .8s infinite; }
.completion-result[data-variant="duel"] .completion-result__emblem { animation: resultEmblem .7s both, resultDuel 2.2s .8s infinite; }
.completion-result[data-variant="survival"] .completion-result__emblem { animation: resultEmblem .7s both, resultPulse 1.8s .8s infinite; }
.completion-result[data-variant="chronology"] .completion-result__emblem { animation: resultEmblem .7s both, resultClock 5s .8s infinite; }
.completion-result[data-variant="dates"] .completion-result__emblem { animation: resultEmblem .7s both, resultFlip 2.8s .8s infinite; }
.completion-result[data-variant="maps"] .completion-result__emblem { animation: resultEmblem .7s both, resultCompass 4s .8s infinite; }
.completion-result[data-variant="figures"] .completion-result__emblem { animation: resultEmblem .7s both, resultNod 3s .8s infinite; }
.completion-result[data-variant="terms"] .completion-result__emblem { animation: resultEmblem .7s both, resultBook 3.4s .8s infinite; }
.completion-result[data-variant="landmarks"] .completion-result__emblem { animation: resultEmblem .7s both, resultRiseFloat 3s .8s infinite; }
.completion-result[data-variant="quotes"] .completion-result__emblem { animation: resultEmblem .7s both, resultScroll 3s .8s infinite; }
.completion-result[data-variant="truth"] .completion-result__emblem { animation: resultEmblem .7s both, resultBalance 2.6s .8s infinite; }
.completion-result[data-variant="pairs"] .completion-result__emblem { animation: resultEmblem .7s both, resultLink 2.5s .8s infinite; }
.completion-result[data-variant="matching"] .completion-result__emblem { animation: resultEmblem .7s both, resultPuzzle 2.5s .8s infinite; }
.completion-result[data-variant="pick3"] .completion-result__emblem { animation: resultEmblem .7s both, resultTarget 2.2s .8s infinite; }
.completion-result[data-variant="test"] .completion-result__emblem { animation: resultEmblem .7s both, resultBook 2.8s .8s infinite; }
.completion-result[data-variant="mixed"] .completion-result__emblem { animation: resultEmblem .7s both, resultMagic 3s .8s infinite; }
.completion-result[data-variant="review"] .completion-result__emblem { animation: resultEmblem .7s both, resultReview 3s .8s infinite; }
.completion-result[data-variant="practice"] .completion-result__emblem { animation: resultEmblem .7s both, resultNod 2.5s .8s infinite; }
.completion-result[data-variant="training"] .completion-result__emblem { animation: resultEmblem .7s both, resultTrain 2.2s .8s infinite; }
.completion-result[data-variant="path"] .completion-result__emblem { animation: resultEmblem .7s both, resultFlag 3s .8s infinite; }
@keyframes resultEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes resultRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes resultEmblem { from { opacity: 0; transform: translateY(55px) scale(.35) rotate(-25deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(-8deg); } }
@keyframes resultFloat { 50% { transform: translateY(-10px) rotate(-5deg); } }
@keyframes resultOrbit { to { transform: rotate(360deg); } }
@keyframes resultSpark { 50% { opacity: .3; transform: translateY(-15px) scale(.7); } }
@keyframes resultStat { from { opacity: 0; transform: translateY(35px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes resultBlitz { 0%, 90%, 100% { transform: rotate(-8deg) scale(1); } 93% { transform: rotate(5deg) scale(1.1); } 96% { transform: rotate(-12deg) scale(.96); } }
@keyframes resultDuel { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg) translateY(-8px); } }
@keyframes resultPulse { 0%, 100% { transform: scale(1) rotate(-8deg); } 20% { transform: scale(1.1) rotate(-8deg); } 40% { transform: scale(1.02) rotate(-8deg); } 60% { transform: scale(1.08) rotate(-8deg); } }
@keyframes resultClock { to { transform: rotate(352deg); } }
@keyframes resultFlip { 0%, 100% { transform: perspective(450px) rotateY(0) rotate(-8deg); } 50% { transform: perspective(450px) rotateY(18deg) rotate(-8deg); } }
@keyframes resultCompass { 0%, 100% { transform: rotate(-25deg); } 40% { transform: rotate(24deg); } 70% { transform: rotate(-4deg); } }
@keyframes resultNod { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(2deg) translateY(6px); } }
@keyframes resultRiseFloat { 0%, 100% { transform: translateY(2px) rotate(-8deg); } 50% { transform: translateY(-12px) rotate(-8deg); } }
@keyframes resultScroll { 0%, 100% { transform: rotate(-8deg) scaleX(1); } 50% { transform: rotate(-8deg) scaleX(1.09); } }
@keyframes resultBalance { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes resultLink { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-8deg) scale(.92); } }
@keyframes resultPuzzle { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes resultTarget { 0%, 100% { transform: scale(1) rotate(-8deg); } 50% { transform: scale(1.1) rotate(-8deg); } }
@keyframes resultBook { 0%, 100% { transform: perspective(450px) rotateY(-12deg); } 50% { transform: perspective(450px) rotateY(12deg); } }
@keyframes resultMagic { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } }
@keyframes resultReview { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(30deg); } }
@keyframes resultTrain { 0%, 100% { transform: translateY(0) rotate(-8deg); } 25%, 75% { transform: translateY(-9px) rotate(-8deg); } 50% { transform: translateY(-2px) rotate(-8deg); } }
@keyframes resultFlag { 0%, 100% { transform: rotate(-8deg) skewY(0); } 50% { transform: rotate(-8deg) skewY(5deg); } }
@media (max-width: 420px) {
    .completion-result__shell { min-height: min(40rem, 100%); }
    .completion-result__stats { gap: .45rem; }
    .completion-result__stat { border-width: 2px; padding: .5rem .3rem .65rem; border-radius: 1rem; }
    .completion-result__stat strong { min-height: 3.5rem; font-size: 1.15rem; }
    .completion-result__actions { grid-template-columns: 5.25rem 1fr; }
    .completion-result__share span { font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
    .completion-result, .completion-result *, .completion-result *::before, .completion-result *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}