:root {
--cdg-h5-gold: #fbbf24;
--cdg-h5-amber: #f59e0b;
--cdg-h5-violet: #7c3aed;
--cdg-h5-magenta: #db2777;
--cdg-h5-cyan: #22d3ee;
} .cdg-end-screen.cdb-result {
position: relative;
isolation: isolate;
border-radius: 22px;
border: 1px solid rgba(251, 191, 36, 0.42);
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.55),
0 0 0 4px rgba(251, 191, 36, 0.18),
0 18px 42px rgba(49, 16, 88, 0.28);
}
.cdg-end-screen.cdb-result::before {
content: "";
pointer-events: none;
position: absolute;
inset: 10px;
z-index: 0;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.12);
}
.cdg-end-screen .cdg-end-screen__glow {
inset: -48% -24%;
background:
radial-gradient(circle at 50% -8%, rgba(251, 191, 36, 0.55), transparent 46%),
radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.22), transparent 42%),
radial-gradient(circle at 16% 88%, rgba(219, 39, 119, 0.28), transparent 48%),
radial-gradient(circle at 50% 100%, rgba(124, 58, 237, 0.22), transparent 50%);
opacity: 1;
animation: cdg-h5-halo 2.8s ease-in-out infinite;
}
.cdg-end-screen .cdb-result__inner {
position: relative;
z-index: 1;
} .cdg-end-screen .cdb-result__score-main {
position: relative;
margin: 0.5rem 0 1.35rem;
padding: 0.35rem 0.25rem 0.55rem;
}
.cdg-end-screen .cdb-result__score-main::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: min(12rem, 70%);
height: 2px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, #fbbf24, #db2777, transparent);
opacity: 0.85;
}
.cdg-end-screen--in .cdb-result__score-value,
.cdb-result--enter .cdb-result__score-value {
font-size: clamp(2.9rem, 11vw, 4.8rem);
letter-spacing: -0.04em;
background: linear-gradient(135deg, #fff7cc 0%, #fbbf24 28%, #f472b6 62%, #a78bfa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 8px 22px rgba(251, 191, 36, 0.38));
animation: cdg-h5-score-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cdg-end-screen .cdb-result__score-sub {
font-size: 1.08rem;
color: #6d28d9;
}
.cdg-end-screen .cdg-perf__kicker:not([hidden]) {
display: inline-flex;
margin: 0 0 0.35rem;
padding: 0.22rem 0.7rem;
border-radius: 999px;
background: linear-gradient(90deg, #fbbf24, #f472b6);
color: #1e1b4b;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
animation: cdg-h5-reward 1.6s ease-in-out 1;
} .cdg-end-screen .cdg-perf__card--badges,
.cdg-end-screen .cdg-end-screen__badges {
border-color: rgba(251, 191, 36, 0.45);
box-shadow: 0 10px 24px rgba(124, 58, 237, 0.12);
}
.cdg-end-screen [data-perf-badges-now]:not([hidden]) {
padding: 0.35rem 0.15rem 0.15rem;
}
.cdg-end-screen [data-perf-badges-now] .cdg-player-badge,
.cdg-end-screen .cdg-player-badge--new {
transform: scale(1.06);
border-color: #f59e0b;
box-shadow:
0 0 0 3px rgba(251, 191, 36, 0.38),
0 0 22px rgba(251, 191, 36, 0.42);
animation: cdg-h5-badge 1.6s ease-in-out 2;
}
.cdg-end-screen .cdg-perf__card {
animation: cdg-h5-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cdg-end-screen .cdg-perf__card--progress { animation-delay: 0.05s; }
.cdg-end-screen .cdg-perf__card--badges { animation-delay: 0.12s; }
.cdg-end-screen .cdg-perf__card--climax { animation-delay: 0.18s; }
.cdg-end-screen .cdg-perf__card--rankings { animation-delay: 0.24s; } .cdg-end-screen .cdg-perf__card--climax:not([hidden]) {
padding-top: 1.35rem;
border-width: 1px;
border-color: rgba(251, 191, 36, 0.7);
box-shadow:
0 0 0 1px rgba(251, 191, 36, 0.35),
0 0 28px rgba(251, 191, 36, 0.22),
0 14px 32px rgba(76, 29, 149, 0.35);
}
.cdg-end-screen .cdg-perf__card--climax:not([hidden])::before {
content: "Moment fort";
display: inline-block;
margin: 0 0 0.45rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: linear-gradient(90deg, #fde68a, #fbbf24);
color: #3b0764;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.cdg-end-screen .cdg-perf__card--climax .cdg-perf__card-title {
color: #fde68a;
} @keyframes cdg-h5-halo {
0%,
100% { opacity: 0.88; transform: scale(1); }
50% { opacity: 1; transform: scale(1.04); }
}
@keyframes cdg-h5-score-in {
from {
opacity: 0;
transform: scale(0.64) translate3d(0, 16px, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes cdg-h5-badge {
0%,
100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.38), 0 0 18px rgba(251, 191, 36, 0.32); }
50% { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.55), 0 0 28px rgba(244, 114, 182, 0.45); }
}
@keyframes cdg-h5-card-in {
from {
opacity: 0;
transform: translate3d(0, 10px, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes cdg-h5-reward {
0%,
100% { filter: brightness(1); }
50% { filter: brightness(1.12); }
} @media (max-width: 390px) {
.cdg-end-screen.cdb-result {
border-radius: 16px;
}
.cdg-end-screen.cdb-result::before {
inset: 7px;
border-radius: 12px;
}
.cdg-end-screen--in .cdb-result__score-value,
.cdb-result--enter .cdb-result__score-value {
font-size: clamp(2.35rem, 15vw, 3.25rem);
}
.cdg-end-screen [data-perf-badges-now] .cdg-player-badge,
.cdg-end-screen .cdg-player-badge--new {
transform: none;
}
}
@media (min-width: 768px) {
.cdg-end-screen .cdb-result__score-main {
margin-bottom: 1.5rem;
}
}
@media (min-width: 1280px) {
.cdg-end-screen--in .cdb-result__score-value,
.cdb-result--enter .cdb-result__score-value {
font-size: 4.6rem;
}
} @media (prefers-reduced-motion: reduce) {
.cdg-end-screen .cdg-end-screen__glow,
.cdg-end-screen--in .cdb-result__score-value,
.cdb-result--enter .cdb-result__score-value,
.cdg-end-screen .cdg-perf__kicker,
.cdg-end-screen .cdg-perf__card,
.cdg-end-screen [data-perf-badges-now] .cdg-player-badge,
.cdg-end-screen .cdg-player-badge--new {
animation: none !important;
}
}