.cdb-result .cdb-result__inner {
position: relative;
z-index: 1;
text-align: center;
}
.cdb-result--enter {
animation: cdb-result-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cdb-result-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.cdb-result-logo {
display: block;
max-width: 220px;
margin: 0 auto 1rem;
}
.cdb-result-logo .cdb-game-logo__img {
width: 100%;
max-width: 220px;
margin-inline: auto;
}
.cdb-result__headline {
margin: 0 0 0.75rem;
font-size: 1.45rem;
font-weight: 800;
line-height: 1.2;
color: #1e1b4b;
}
.cdb-result__score-main {
margin: 0 0 1.15rem;
line-height: 1.05;
}
.cdb-result__score-value {
display: block;
font-size: clamp(2rem, 6vw, 2.75rem);
font-weight: 800;
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, #7c3aed, #db2777);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cdb-result__score-sub {
display: block;
margin-top: 0.35rem;
font-size: 1.05rem;
font-weight: 700;
color: #5b21b6;
}
.cdb-result__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
margin: 0 0 1rem;
text-align: center;
}
.cdb-result__card {
padding: 0.75rem 0.65rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(124, 58, 237, 0.16);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.cdb-result__card-label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
}
.cdb-result__card-value {
display: block;
font-size: 1.15rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: #0f172a;
}
.cdb-result__encourage {
margin-bottom: 0.75rem;
}
.cdb-result__summary:empty,
.cdb-result__meta[hidden] {
display: none;
}
.cdb-result__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.55rem;
margin-top: 0.35rem;
}
.cdb-result__actions .cdg-quiz__btn,
.cdb-result__actions .cdg-quiz__btn:visited {
min-width: min(100%, 12rem);
}
@media (min-width: 720px) {
.cdb-result__cards {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cdb-result-logo {
max-width: 260px;
}
.cdb-result-logo .cdb-game-logo__img {
max-width: 260px;
}
}
@media (max-width: 640px) {
.cdb-result-logo {
max-width: 180px;
margin-bottom: 0.75rem;
}
.cdb-result-logo .cdb-game-logo__img {
max-width: 180px;
}
.cdb-result__headline {
font-size: 1.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.cdb-result--enter {
animation: none;
}
}