/* ---------- RESULTS OVERLAY ---------- */

#results {

position: fixed;
inset: 0;

display: flex;
align-items: center;
justify-content: center;

background: rgba(10,14,22,.55);
backdrop-filter: blur(10px);

opacity: 0;
pointer-events: none;

transition: opacity .25s ease;

z-index: 1000;

}

#results.show {
opacity: 1;
pointer-events: auto;
}


/* ---------- RESULT CARD ---------- */

#results .card {

background: linear-gradient(
180deg,
rgba(20,25,34,.95),
rgba(20,25,34,.92)
);

border: 1px solid rgba(255,255,255,.06);

border-radius: 14px;

padding: 48px 70px;

box-shadow:
0 20px 60px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.02) inset;

animation: resultPop .35s ease;

text-align: center;

min-width: 320px;

}


/* ---------- TITLE ---------- */

#results h2 {

font-size: 22px;
letter-spacing: 4px;

color: var(--accent);

margin-bottom: 30px;

opacity: .9;

}


/* ---------- STATS ---------- */

.stats {

display: grid;
grid-template-columns: 140px 100px;

row-gap: 14px;
column-gap: 60px;

font-size: 15px;

margin-bottom: 32px;

}

.stats div:nth-child(odd) {

text-align: left;
color: var(--footer);

}

.stats div:nth-child(even) {

text-align: right;
font-weight: 600;
color: var(--text);

}


/* ---------- DIVIDER ---------- */

#results hr {

border: none;
border-top: 1px solid rgba(255,255,255,.05);

margin: 30px 0;

}


/* ---------- MISTAKES ---------- */

.mistakes-title {

font-size: 13px;
letter-spacing: 1px;

color: var(--footer);

margin-bottom: 12px;

}

.mistakes {

display: flex;
flex-direction: column;
gap: 8px;

font-size: 17px;

}

.mistake {

display: flex;
justify-content: center;
gap: 28px;

font-weight: 500;

}


/* ---------- BUTTONS ---------- */

.result-buttons {

display: flex;
gap: 14px;

justify-content: center;

margin-top: 28px;

}

.result-buttons button {

background: rgba(255,255,255,.04);

border: 1px solid rgba(255,255,255,.06);

color: var(--text);

padding: 8px 18px;

border-radius: 7px;

font-size: 13px;
font-family: monospace;

cursor: pointer;

transition: all .18s ease;

}

.result-buttons button:hover {

background: var(--accent);
color: var(--bg);

transform: translateY(-1px);

box-shadow: 0 6px 18px rgba(0,0,0,.35);

}


/* ---------- TAB HINT ---------- */

.result-subtext {

margin-top: 20px;

font-size: 12px;

color: var(--footer);

opacity: .7;

}

.result-subtext kbd {

background: rgba(255,255,255,.06);

padding: 2px 6px;

border-radius: 4px;

font-size: 11px;

}


/* ---------- POP ANIMATION ---------- */

@keyframes resultPop {

0% {
opacity: 0;
transform: translateY(12px) scale(.97);
}

100% {
opacity: 1;
transform: translateY(0) scale(1);
}

}