:root {
--cdg-h6-gold: #fbbf24;
--cdg-h6-ink: #07040f;
--cdg-h6-violet: #7c3aed;
--cdg-h6-magenta: #db2777;
} .cdg-end-screen--in.cdb-result::after {
content: "";
pointer-events: none;
position: absolute;
inset: 0;
z-index: 8;
border-radius: inherit;
background:
radial-gradient(ellipse 70% 50% at 50% 38%, rgba(251, 191, 36, 0.16), transparent 58%),
linear-gradient(180deg, #0b0618 0%, #07040f 100%);
animation: cdg-h6-curtain 0.62s ease 0.04s forwards;
}
.cdg-end-screen--in .cdb-result__inner > .cdb-result-logo,
.cdg-end-screen--in .cdb-result__inner > .cdb-game-logo,
.cdg-end-screen--in .cdb-result__headline,
.cdg-end-screen--in .cdg-perf__kicker,
.cdg-end-screen--in .cdb-result__score-main,
.cdg-end-screen--in .cdb-result__cards,
.cdg-end-screen--in .cdb-result__encourage,
.cdg-end-screen--in .cdg-perf__card--progress,
.cdg-end-screen--in .cdg-perf__card--badges,
.cdg-end-screen--in .cdg-end-screen__badges,
.cdg-end-screen--in .cdg-perf__card--climax,
.cdg-end-screen--in .cdg-perf__card--rankings,
.cdg-end-screen--in .cdb-result__actions {
animation: cdg-h6-reveal 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cdg-end-screen--in .cdb-result__inner > .cdb-result-logo,
.cdg-end-screen--in .cdb-result__inner > .cdb-game-logo {
animation-delay: 0.42s;
}
.cdg-end-screen--in .cdb-result__headline {
animation-delay: 0.5s;
}
.cdg-end-screen--in .cdg-perf__kicker {
animation-delay: 0.58s;
}
.cdg-end-screen--in .cdb-result__score-main {
animation-delay: 0.72s;
}
.cdg-end-screen--in .cdb-result__score-value {
animation: cdg-h6-score 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
}
.cdg-end-screen--in .cdb-result__cards,
.cdg-end-screen--in .cdb-result__encourage {
animation-delay: 1.08s;
}
.cdg-end-screen--in .cdg-perf__card--progress {
animation-delay: 1.42s !important;
}
.cdg-end-screen--in .cdg-perf__card--badges,
.cdg-end-screen--in .cdg-end-screen__badges {
animation-delay: 1.78s !important;
}
.cdg-end-screen--in .cdg-perf__card--climax {
animation-delay: 2.02s !important;
}
.cdg-end-screen--in .cdg-perf__card--rankings {
animation-delay: 2.28s !important;
}
.cdg-end-screen--in .cdb-result__actions {
animation-delay: 2.48s;
} .cdg-end-screen .cdb-result__score-sub:not([hidden]) {
display: block;
margin-top: 0.55rem;
padding: 0.28rem 0.75rem;
border-radius: 999px;
background: rgba(124, 58, 237, 0.1);
color: #5b21b6;
font-size: 0.92rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.cdg-end-screen .cdb-result__cards {
gap: 0.55rem;
}
.cdg-end-screen .cdb-result__card:last-child {
border-color: rgba(251, 191, 36, 0.45);
background: linear-gradient(180deg, #fffbeb, #faf5ff);
}
.cdg-end-screen .cdg-perf__card--progress {
border-color: rgba(124, 58, 237, 0.32);
box-shadow: 0 10px 22px rgba(124, 58, 237, 0.1);
}
.cdg-end-screen [data-perf-xp-gained] {
font-weight: 800;
color: #6d28d9;
}
.cdg-end-screen .cdg-perf__level {
font-size: 1.02rem;
font-weight: 800;
color: #1e1b4b;
}
.cdg-end-screen [data-perf-badges-now]:not([hidden]) {
padding: 0.45rem 0.2rem 0.25rem;
border-radius: 14px;
background: linear-gradient(180deg, rgba(251, 191, 36, 0.14), transparent 80%);
} .cdg-end-screen .cdg-end-screen__glow::before,
.cdg-end-screen .cdg-end-screen__glow::after {
content: "";
pointer-events: none;
position: absolute;
inset: 0;
}
.cdg-end-screen .cdg-end-screen__glow::before {
background:
linear-gradient(180deg, rgba(251, 191, 36, 0.22), transparent 42%),
radial-gradient(ellipse 40% 28% at 18% 0%, rgba(34, 211, 238, 0.28), transparent 70%),
radial-gradient(ellipse 40% 28% at 82% 0%, rgba(244, 114, 182, 0.26), transparent 70%);
opacity: 0.85;
animation: cdg-h6-lights 3.4s ease-in-out infinite;
}
.cdg-end-screen .cdg-end-screen__glow::after {
top: 12%;
height: 55%;
background:
radial-gradient(circle at 22% 40%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
radial-gradient(circle at 48% 22%, rgba(251, 191, 36, 0.7) 0 1.2px, transparent 2.4px),
radial-gradient(circle at 71% 58%, rgba(244, 114, 182, 0.65) 0 1px, transparent 2px),
radial-gradient(circle at 38% 72%, rgba(167, 139, 250, 0.6) 0 1px, transparent 2px),
radial-gradient(circle at 86% 30%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px);
opacity: 0.55;
animation: cdg-h6-spark 2.8s ease-in-out infinite;
} .cdg-end-screen .cdg-perf__card--climax:not([hidden]) {
padding: 1.15rem 1.1rem 1.2rem;
}
.cdg-end-screen .cdg-perf__card--climax:not([hidden])::before {
content: "★ Moment fort";
letter-spacing: 0.16em;
}
.cdg-end-screen .cdg-perf__card--climax .cdg-perf__card-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
}
.cdg-end-screen .cdg-perf__card--climax .cdg-perf__card-title::after {
content: "×2 · finale";
display: inline-flex;
padding: 0.12rem 0.5rem;
border-radius: 999px;
background: rgba(251, 191, 36, 0.18);
color: #fde68a;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cdg-end-screen .cdg-perf__climax-line {
margin-top: 0.35rem;
padding-top: 0.45rem;
border-top: 1px solid rgba(253, 230, 138, 0.28);
} .cdg-end-screen .cdb-result__actions,
.cdg-end-screen .cdg-end-screen__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
margin-top: 1rem;
}
.cdg-end-screen .cdb-result__btn-replay {
order: -3;
min-height: 48px;
width: 100%;
border: 0;
font-size: 1.02rem;
font-weight: 800;
letter-spacing: 0.01em;
color: #1e1b4b;
background: linear-gradient(90deg, #fbbf24, #f472b6 70%);
box-shadow: 0 8px 20px rgba(219, 39, 119, 0.28);
}
.cdg-end-screen .cdg-perf__btn-new {
order: -2;
min-height: 44px;
background: #fff;
color: #5b21b6;
border: 1px solid rgba(124, 58, 237, 0.35);
box-shadow: none;
}
.cdg-end-screen .cdg-perf__btn-ranks {
order: -1;
min-height: 44px;
background: transparent;
color: #6d28d9;
border: 1px solid rgba(124, 58, 237, 0.22);
font-weight: 650;
}
.cdg-end-screen .cdb-result__btn-back {
order: 8;
min-height: 44px;
} @keyframes cdg-h6-curtain {
to {
opacity: 0;
visibility: hidden;
}
}
@keyframes cdg-h6-reveal {
from {
opacity: 0;
transform: translate3d(0, 12px, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes cdg-h6-score {
from {
opacity: 0;
transform: scale(0.62) translate3d(0, 14px, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes cdg-h6-lights {
0%,
100% { opacity: 0.72; }
50% { opacity: 1; }
}
@keyframes cdg-h6-spark {
0%,
100% { opacity: 0.35; transform: translate3d(0, 0, 0); }
50% { opacity: 0.7; transform: translate3d(0, -6px, 0); }
} @media (max-width: 390px) {
.cdg-end-screen .cdb-result__btn-replay {
font-size: 0.95rem;
}
.cdg-end-screen .cdb-result__score-sub:not([hidden]) {
font-size: 0.8rem;
}
}
@media (min-width: 768px) {
.cdg-end-screen .cdb-result__actions,
.cdg-end-screen .cdg-end-screen__actions {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.cdg-end-screen .cdb-result__btn-replay {
flex: 1 1 100%;
}
.cdg-end-screen .cdg-perf__btn-new,
.cdg-end-screen .cdg-perf__btn-ranks,
.cdg-end-screen .cdb-result__btn-back {
flex: 1 1 calc(50% - 0.5rem);
}
}
@media (min-width: 1280px) {
.cdg-end-screen .cdb-result__btn-replay {
max-width: 28rem;
margin: 0 auto;
}
} @media (prefers-reduced-motion: reduce) {
.cdg-end-screen--in.cdb-result::after,
.cdg-end-screen .cdg-end-screen__glow::before,
.cdg-end-screen .cdg-end-screen__glow::after,
.cdg-end-screen--in .cdb-result__inner > .cdb-result-logo,
.cdg-end-screen--in .cdb-result__inner > .cdb-game-logo,
.cdg-end-screen--in .cdb-result__headline,
.cdg-end-screen--in .cdg-perf__kicker,
.cdg-end-screen--in .cdb-result__score-main,
.cdg-end-screen--in .cdb-result__score-value,
.cdg-end-screen--in .cdb-result__cards,
.cdg-end-screen--in .cdb-result__encourage,
.cdg-end-screen--in .cdg-perf__card--progress,
.cdg-end-screen--in .cdg-perf__card--badges,
.cdg-end-screen--in .cdg-end-screen__badges,
.cdg-end-screen--in .cdg-perf__card--climax,
.cdg-end-screen--in .cdg-perf__card--rankings,
.cdg-end-screen--in .cdb-result__actions {
animation: none !important;
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
.cdg-end-screen--in.cdb-result::after {
display: none;
}
}