:root {
    --portal-primary: #635bff;
    --portal-secondary: #8b5cf6;
}

body {
    min-height: 100vh;
    color: #20213a;
}

.portal-navbar {
    background: linear-gradient(120deg, var(--portal-primary), var(--portal-secondary));
}

.portal-card {
    border-radius: 1.25rem;
}

.portal-icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    font-size: 2rem;
}

.portal-icon.success {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.metric-box,
.result-box {
    padding: 1rem .5rem;
    border-radius: 1rem;
    background: #f2f1ff;
}

.metric-box strong,
.metric-box span,
.result-box strong,
.result-box span,
.game-time-box strong,
.game-time-box span {
    display: block;
}

.metric-box strong,
.result-box strong {
    font-size: 1.45rem;
}

.metric-box span,
.result-box span,
.game-time-box span {
    color: #6b7280;
    font-size: .8rem;
}

.result-box.reward {
    background: #ecfdf5;
}

.game-time-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    padding: 1rem;
    border-radius: 1rem;
    background: #fff8e7;
    text-align: center;
}

.game-time-box strong {
    font-size: 1.25rem;
}

.option-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.option-card:hover,
.option-card:has(input:checked) {
    border-color: var(--portal-primary);
    background: #f5f3ff;
}

.option-label {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #fff;
    background: var(--portal-primary);
    font-weight: 700;
}

.review-card {
    border-left: .35rem solid #9ca3af !important;
}

.review-correct {
    border-left-color: #22c55e !important;
}

.review-incorrect {
    border-left-color: #ef4444 !important;
}

.explanation-box {
    padding: 1rem;
    border-radius: .75rem;
    background: #fff8e7;
}

.progress {
    height: .75rem;
}

.progress-bar {
    background: linear-gradient(90deg, var(--portal-primary), var(--portal-secondary));
}