/* Cultural Ambassador Journey - Global Styles */

/* CSS Custom Properties for approved colors */
:root {
    --Verde: #00CD73;
    --Roxo: #460032;
    --Rosa: #B40054;
    --Azul: #000164;
    --Laranja: #F50;
    --Amarelo: #FFB40F;
    --Cinza-escuro: #A2A4A3;
    
    /* Zoom adaptation variables */
    --zoom-scale-factor: 1;
    --main-title-size: 4em;
    --main-heading-size: 3.5em;
    --mission-answer-size: 5.3em;
    --challenge-name-size: 4.5em;
    --badge-name-size: 3em;
    --left-panel-padding: 1.75em 4em;
    --challenge-info-right: 2.5em;
    --modal-max-width: 25em;
    --button-padding: 1.125em;
    --challenge-detail-padding: 7em;
    --nav-links-gap: 1.25em;
    --metrics-gap: 2.5em;
    --badge-icon-size: 10em;
    --form-input-padding: 0.9375em 0;
    --challenge-icon-size: 15em;
    --welcome-text-size: 1.1em;
    --intro-text-size: 1.1em;
    --explanation-text-size: 1.1em;
    --instructions-text-size: 1.1em;
    --logo-max-width: 11.25em;
    --logo-margin-bottom: 2.5em;
    --metric-number-size: 4em;
    --metric-label-size: 1.6em;
    --header-margin-bottom: 2.5em;
    --cta-text-size: 1.1em;
    --metrics-margin: 1.875em 0;
    --instructions-margin: 2.5em 0;
    --welcome-line-height: 1.4;
    --intro-line-height: 1.6;
    --explanation-line-height: 1.6;
    --instructions-line-height: 1.5;
    --nav-links-font-size: 0.875em;
    --challenge-date-size: 1.3em;
    --challenge-detail-title-size: 4em;
    --challenge-detail-date-size: 1.3em;
    --challenge-detail-h3-size: 1.5em;
    --challenge-detail-p-size: 1.1em;
    --challenge-detail-margin: 2.5em;
}

/* Import PolySans font from local fonts folder */
@font-face {
    font-family: 'PolySans';
    src: url('./fonts/PolySans-Slim.woff2') format('woff2'),
         url('./fonts/PolySans-Slim.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PolySans';
    src: url('./fonts/PolySans-Neutral.woff2') format('woff2'),
         url('./fonts/PolySans-Neutral.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PolySans';
    src: url('./fonts/PolySans-Median.woff2') format('woff2'),
         url('./fonts/PolySans-Median.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PolySans';
    src: url('./fonts/PolySans-Bulky.woff2') format('woff2'),
         url('./fonts/PolySans-Bulky.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Global reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'PolySans', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

/* Allow scrolling on mobile */
@media (max-width: 768px) {
    body {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }
}

/* Allow scrolling at high zoom levels (150% and above) */
@media (max-width: 1200px) {
    body {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }
    
    .login-container,
    .change-password-container,
    .welcome-container,
    .challenges-container,
    .members-container,
    .challenge-detail-container {
        height: auto;
        min-height: 100vh;
    }
    
    /* Change vertical centering to top alignment for scrollable content */
    .right-panel,
    .challenge-detail-container .right-panel {
        align-items: flex-start;
        justify-content: center;
        overflow-y: auto;
        padding: 2em 0;
    }
}

/* ========================================
   LAYOUT COMPONENTS
   ======================================== */

/* Split-screen containers */
.login-container,
.change-password-container,
.welcome-container,
.challenges-container,
.members-container {
    display: flex;
    height: 100vh;
    overflow: visible;
}

.left-panel {
    width: 40%;
    background: white;
    padding: var(--left-panel-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.right-panel {
    width: 60%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   HEADER COMPONENTS
   ======================================== */

.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--header-margin-bottom);
}

.logo {
    margin-bottom: var(--logo-margin-bottom);
}

.logo img {
    max-width: var(--logo-max-width);
    height: auto;
}

.nav-links {
    display: flex;
    gap: var(--nav-links-gap);
}

.nav-links a {
    color: var(--Rosa, #B40054);
    text-decoration: none;
    font-weight: 300;
    font-size: var(--nav-links-font-size);
    text-transform: uppercase;
    letter-spacing: 0.0625em;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--Roxo, #460032);
}

.nav-links a.active {
    text-decoration: underline;
}

/* Mobile Menu Toggle (Hamburger) */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.5em;
}

.mobile-menu-toggle span {
    width: 1.5em;
    height: 0.125em;
    background: var(--Rosa, #B40054);
    margin: 0.1875em 0;
    transition: 0.3s;
    border-radius: 0.0625em;
}

.mobile-menu-toggle:hover span {
    background: var(--Roxo, #460032);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.mobile-menu-overlay.active {
    display: flex;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5em 1.25em;
    border-bottom: 0.0625em solid #f0f0f0;
}

.mobile-menu-close {
    font-size: 1.5em;
    color: var(--Rosa, #B40054);
    cursor: pointer;
    padding: 0.5em;
    line-height: 1;
}

.mobile-menu-close:hover {
    color: var(--Roxo, #460032);
}

.mobile-menu-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3em 2em;
    text-align: center;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.mobile-menu-links a {
    color: var(--Roxo, #460032);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    padding: 1em 2em;
    border: 0.125em solid var(--Roxo, #460032);
    border-radius: 0.5em;
    transition: all 0.3s ease;
    text-align: center;
}

.mobile-menu-links a:hover {
    background: var(--Rosa, #B40054);
    color: white;
    border-color: var(--Rosa, #B40054);
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

.page-title {
    color: var(--Rosa, #B40054);
    font-size: 1em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    margin-bottom: 1.25em;
}

.main-title {
    margin-bottom: 1.875em;
}

.main-title h1 {
    font-size: var(--main-title-size);
    font-weight: 600;
    line-height: 0.9;
    margin: 0;
}

.title-cultural {
    color: var(--Roxo, #460032);
}

.title-ambassador {
    color: var(--Rosa, #B40054);
}

.title-journey {
    color: var(--Azul, #000164);
}

.main-heading {
    color: var(--Rosa, #B40054);
    font-size: var(--main-heading-size);
    font-weight: 700;
    margin-bottom: 0.9375em;
}

.welcome-message {
    margin-bottom: 1.875em;
}

.welcome-message h2 {
    color: var(--Roxo, #460032);
    font-size: 1.2em;
    font-weight: 400;
    margin-bottom: 0.9375em;
}

.welcome-message h2 b {
    font-weight: 600;
}

.welcome-message p {
    color: var(--Roxo, #460032);
    font-size: 1.2em;
    line-height: var(--welcome-line-height);
    font-weight: 300;
    margin-bottom: 0.9375em;
}

.welcome-message strong {
    color: var(--Roxo, #460032);
    font-weight: 600;
}

.intro-text {
    margin-bottom: 1.875em;
}

.intro-text p {
    color: var(--Roxo, #460032);
    font-size: 1.1em;
    line-height: var(--intro-line-height);
    margin-bottom: 0.9375em;
}

.intro-text strong {
    color: var(--Roxo, #460032);
    font-weight: 600;
}

.mission-section {
    margin: 2.5em 0;
    display: flex;
    align-items: center;
    gap: 1.5em;
}

.mission-question {
    color: var(--Roxo, #460032);
    font-size: 1.6em;
    font-weight: 300;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    flex-shrink: 0;
}

.mission-answer {
    color: var(--Rosa, #B40054);
    font-size: var(--mission-answer-size);
    font-weight: 600;
    line-height: 1.1;
    flex: 1;
}

.explanation {
    margin: 1.875em 0;
}

.explanation p {
    color: var(--Roxo, #460032);
    font-size: 1.1em;
    line-height: var(--explanation-line-height);
    margin-bottom: 0.9375em;
}

.explanation strong {
    color: var(--Roxo, #460032);
    font-weight: 600;
}

.description {
    color: var(--Roxo, #460032);
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 1.875em;
}

.validation-note {
    color: var(--Cinza-escuro, #A2A4A3);
    font-size: 0.85em;
    line-height: 1.5;
    margin-bottom: 1.875em;
    font-style: italic;
}

/* ========================================
   METRICS AND STATS
   ======================================== */

.metrics {
    display: flex;
    gap: var(--metrics-gap);
    margin: var(--metrics-margin);
}

.metric {
    text-align: start;
}

.metric-number {
    font-size: var(--metric-number-size);
    font-weight: 600;
    color: var(--Rosa, #B40054);
    line-height: 1;
}

.metric-label {
    font-size: var(--metric-label-size);
    color: var(--Roxo, #460032);
    font-weight: 300;
}

.instructions {
    margin: var(--instructions-margin);
}

.instructions p {
    color: var(--Roxo, #460032);
    font-size: 1.1em;
    line-height: var(--instructions-line-height);
    font-weight: 400;
    margin-bottom: 1.25em;
}

.instructions p:last-child {
    margin-bottom: 0;
}

.instructions strong {
    font-weight: 600;
}

/* ========================================
   FORMS
   ======================================== */

.signin-section {
    margin-bottom: 2.5em;
}

.signin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.875em;
}

.signin-title {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--Roxo, #460032);
    margin: 0;
}

.join-link {
    color: var(--Rosa, #B40054);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875em;
}

.join-link:hover {
    text-decoration: underline;
}

.signin-subtitle {
    font-size: 0.9em;
    color: var(--Cinza-escuro, #A2A4A3);
    margin-bottom: 1.5em;
    text-align: center;
}


.code-info {
    margin-top: 0.5em;
    text-align: center;
}

.code-info p {
    font-size: 0.8em;
    color: var(--Cinza-escuro, #A2A4A3);
    margin: 0;
}

.resend-section {
    text-align: center;
    margin-top: 1.5em;
    font-size: 0.9em;
}

.btn-link {
    background: none;
    border: none;
    color: var(--Rosa, #B40054);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

.btn-link:hover {
    color: var(--Roxo, #460032);
}

.form-group {
    margin-bottom: 1.875em;
}

.form-group label {
    display: block;
    margin-bottom: 0.5em;
    color: var(--Roxo, #460032);
    font-weight: 600;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
}

.form-group input {
    width: 100%;
    padding: 0.9375em 0;
    border: none;
    border-bottom: 0.125em solid var(--Cinza-escuro, #A2A4A3);
    font-size: 1em;
    background: transparent;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-bottom-color: var(--Rosa, #B40054);
}


.form-title {
    color: var(--Roxo, #460032);
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 0.625em;
}

.form-subtitle {
    color: var(--Cinza-escuro, #A2A4A3);
    font-size: 0.875em;
    margin-bottom: 1.875em;
}

.password-requirements {
    background: #f8f9fa;
    padding: 0.9375em;
    border-radius: 0.5em;
    margin-bottom: 1.25em;
    font-size: 0.75em;
    color: var(--Cinza-escuro, #A2A4A3);
}

.password-requirements ul {
    margin: 0;
    padding-left: 1.25em;
}

/* ========================================
   BUTTONS
   ======================================== */

.submit-btn,
.btn {
    width: 100%;
    padding: var(--button-padding);
    background: var(--Rosa, #B40054);
    color: white;
    border: none;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1.25em;
}

.submit-btn:hover,
.btn:hover {
    background: var(--Rosa, #B40054);
    transform: translateY(-0.125em);
}

/* ========================================
   ALERTS
   ======================================== */

.alert {
    padding: 0.75em 1em;
    border-radius: 0.5em;
    margin-bottom: 1.25em;
    font-size: 0.875em;
}

.alert-error {
    background: #fee;
    color: var(--Rosa, #B40054);
    border: 0.0625em solid #fcc;
}

.alert-success {
    background: #efe;
    color: var(--Verde, #00CD73);
    border: 0.0625em solid #cfc;
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer p {
    font-size: 0.75em;
    color: var(--Roxo, #460032);
    margin: 0;
}

.footer a {
    color: var(--Roxo, #460032);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* ========================================
   PAGE SPECIFIC BACKGROUNDS
   ======================================== */

.login-container .right-panel,
.change-password-container .right-panel,
.welcome-container .right-panel {
    background: url('images/pink_purple_bg.svg') no-repeat center center;
    background-size: cover;
}

.team-image {
    width: 80%;
    height: 80%;
    object-fit: cover;
    object-position: center;
}

.cta-section {
    margin: 1.875em 0;
}

.cta-text {
    color: var(--Roxo, #460032);
    font-size: var(--cta-text-size);
    margin-bottom: 0.625em;
}

.cta-link {
    color: var(--Rosa, #B40054);
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
}

.cta-link:hover {
    text-decoration: underline;
}

/* ========================================
   CHALLENGES PAGE SPECIFIC
   ======================================== */

.challenges-container .left-panel {
    justify-content: flex-start !important;
}

.challenges-container .header {
    margin-bottom: 3em !important;
}

.challenges-container .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5em;
    min-height: 60vh;
}

.challenges-container .footer {
    margin-top: auto !important;
}

.challenges-container .intro-text {
    margin-bottom: 0 !important;
}

.challenges-container .mission-section {
    margin: 0 !important;
}

.challenges-container .explanation {
    margin: 0 !important;
}

.challenges-container .right-panel {
    background: #f8f9fa;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.challenges-grid {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    height: 100vh;
    width: 100%;
}

.challenge-row {
    position: relative;
    overflow: hidden;
    background: white;
    cursor: pointer;
}

/* Challenge row color variables */
.challenge-row.ambition { --challenge-color: var(--Azul, #000164); }
.challenge-row.diverse-perspectives { --challenge-color: var(--Roxo, #460032); }
.challenge-row.talent-growth { --challenge-color: var(--Rosa, #B40054); }
.challenge-row.collaboration { --challenge-color: var(--Verde, #00CD73); }
.challenge-row.ownership { --challenge-color: var(--Laranja, #F50); }
.challenge-row.learning { --challenge-color: var(--Amarelo, #FFB40F); }

/* Locked challenge styles */
.challenge-row.locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.challenge-row.locked .challenge-graph img {
    filter: grayscale(100%);
}

.challenge-row.locked .challenge-name {
    color: var(--Cinza-escuro, #A2A4A3) !important;
}

.challenge-row.locked .challenge-date {
    color: var(--Cinza-escuro, #A2A4A3) !important;
}

.challenge-graph {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: width 0.5s ease;
    overflow: visible;
}

.challenge-graph img {
    width: auto;
    height: 100%;
    object-position: left center;
    transition: transform 0.5s ease;
    transform-origin: left center;
}

.challenge-row:hover .challenge-graph {
    width: 150%;
}

.challenge-row:hover .challenge-graph img {
    transform: scale(45);
}

.challenge-row.ambition:hover .challenge-graph img {
    transform: scale(45);
}

.challenge-row.diverse-perspectives:hover .challenge-graph img {
    transform: scale(20);
}

.challenge-row.talent-growth:hover .challenge-graph img {
    transform: scale(15);
}

.challenge-row.ownership:hover .challenge-graph img {
    transform: scale(10);
}

.challenge-row.collaboration:hover .challenge-graph img {
    transform: scale(10);
}

.challenge-row.learning:hover .challenge-graph img {
    transform: scale(10);
}

.challenge-row:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--challenge-color);
    z-index: 0;
    opacity: 0;
    animation: backgroundFadeIn 0.5s ease 0.3s forwards;
}

@keyframes backgroundFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.challenge-info {
    position: absolute;
    right: 2.5em;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    transition: color 0.8s ease;
    text-align: right;
}

.challenge-name {
    font-size: 4.5em;
    font-weight: 700;
    transition: color 0.8s ease;
}

/* Challenge name colors */
.challenge-row.ambition .challenge-name { color: var(--Azul, #000164); }
.challenge-row.diverse-perspectives .challenge-name { color: var(--Roxo, #460032); }
.challenge-row.talent-growth .challenge-name { color: var(--Rosa, #B40054); }
.challenge-row.collaboration .challenge-name { color: var(--Verde, #00CD73); }
.challenge-row.ownership .challenge-name { color: var(--Laranja, #F50); }
.challenge-row.learning .challenge-name { color: var(--Amarelo, #FFB40F); }

.challenge-date {
    font-size: var(--challenge-date-size);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    transition: color 0.8s ease;
}

.date-text {
    font-weight: 600;
}

/* Challenge date colors */
.challenge-row.ambition .challenge-date { color: var(--Azul, #000164); }
.challenge-row.diverse-perspectives .challenge-date { color: var(--Roxo, #460032); }
.challenge-row.talent-growth .challenge-date { color: var(--Rosa, #B40054); }
.challenge-row.collaboration .challenge-date { color: var(--Verde, #00CD73); }
.challenge-row.ownership .challenge-date { color: var(--Laranja, #F50); }
.challenge-row.learning .challenge-date { color: var(--Amarelo, #FFB40F); }

.challenge-row:hover .challenge-name {
    color: white;
}

.challenge-row:hover .challenge-date {
    color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   MEMBERS PAGE SPECIFIC
   ======================================== */

.members-container .left-panel {
    justify-content: flex-start !important;
}

.members-container .header {
    margin-bottom: 3em !important;
}

.members-container .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5em;
    min-height: 60vh;
}

.members-container .footer {
    margin-top: auto !important;
}

.members-container .right-panel {
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100vh;
    width: 100%;
    overflow: visible;
}

.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    border: none;
    transform-style: preserve-3d;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.badge.locked {
    cursor: default;
}

.badge:not(.locked).hovering {
    transform: perspective(1000px) rotateX(var(--mouse-y, 0deg)) rotateY(var(--mouse-x, 0deg)) scale(1.05) translateZ(30px);
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 12px 35px rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.badge:not(.locked).hovering::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, var(--light-intensity, 0.1)) 0%,
        rgba(0, 0, 0, var(--dark-intensity, 0.1)) 100%
    );
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: overlay;
}

.badge:not(.locked).hovering::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at var(--mouse-x-pos, 50%) var(--mouse-y-pos, 50%),
        rgba(255, 255, 255, calc(var(--light-intensity, 0) * 0.3)) 0%,
        transparent 50%
    );
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: screen;
}


.badge.completed {
    animation: pulse 2s infinite;
}

/* Staggered pulsation for wave effect */
.badge.ambition.completed { animation-delay: 0s; }
.badge.diverse-perspectives.completed { animation-delay: 0.1s; }
.badge.talent-growth.completed { animation-delay: 0.2s; }
.badge.collaboration.completed { animation-delay: 0.3s; }
.badge.ownership.completed { animation-delay: 0.4s; }
.badge.learning.completed { animation-delay: 0.5s; }

@keyframes pulse {
    0% { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3); }
    70% { box-shadow: inset 0 0 0 1.25em rgba(255, 255, 255, 0); }
    100% { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); }
}

.badge-icon {
    width: 10em;
    height: 10em;
    margin-bottom: 0.9375em;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.badge-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

.badge-name {
    color: white;
    font-size: 3em;
    font-weight: 600;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Badge background colors */
.badge.ambition { 
    background: var(--Azul, #000164); 
    color: var(--Azul, #000164);
}
.badge.diverse-perspectives { 
    background: var(--Roxo, #460032); 
    color: var(--Roxo, #460032);
}
.badge.talent-growth { 
    background: var(--Rosa, #B40054); 
    color: var(--Rosa, #B40054);
}
.badge.collaboration { 
    background: var(--Verde, #00CD73); 
    color: var(--Verde, #00CD73);
}
.badge.ownership { 
    background: var(--Laranja, #F50); 
    color: var(--Laranja, #F50);
}
.badge.learning { 
    background: var(--Amarelo, #FFB40F); 
    color: var(--Amarelo, #FFB40F);
}

.badge.locked {
    opacity: 0.6;
}

/* Different gray shades for each locked badge type */
.badge.ambition.locked {
    background: #8A8A8A; /* Medium gray */
}

.badge.diverse-perspectives.locked {
    background: #6B6B6B; /* Darker gray */
}

.badge.talent-growth.locked {
    background: #9A9A9A; /* Lighter gray */
}

.badge.collaboration.locked {
    background: #7A7A7A; /* Medium-dark gray */
}

.badge.ownership.locked {
    background: #5A5A5A; /* Dark gray */
}

.badge.learning.locked {
    background: #AAAAAA; /* Light gray */
}

.badge.locked .badge-icon img,
.badge.locked .badge-name {
    opacity: 0.5;
    filter: grayscale(100%) saturate(0%);
}

/* Undo completion link styling */
.undo-link {
    background: none;
    border: none;
    color: white;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.6em;
    padding: 0;
    margin: 0;
    font-family: inherit;
}

.undo-link:hover {
    text-decoration: none;
}

/* Challenge-specific undo-link hover colors */
.ambition-bg .undo-link:hover {
    color: var(--Verde, #00CD73);
}

.perspectives-bg .undo-link:hover {
    color: var(--Rosa, #B40054);
}

.talent-bg .undo-link:hover {
    color: var(--Laranja, #F50);
}

.ownership-bg .undo-link:hover {
    color: var(--Roxo, #460032);
}

.collaboration-bg .undo-link:hover {
    color: var(--Azul, #000164);
}

.learning-bg .undo-link:hover {
    color: var(--Rosa, #B40054);
}

/* Badge unlock animation */
.badge.unlocked {
    animation: pulse-shine 1s ease-out, pulse 2s infinite 1s;
    position: relative;
    overflow: visible;
}

/* Confetti container */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

/* Individual confetti pieces */
.confetti-piece {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
}

/* Varied confetti sizes and shapes */
.confetti-piece:nth-child(1) { width: 6px; height: 6px; border-radius: 50%; }
.confetti-piece:nth-child(2) { width: 8px; height: 4px; border-radius: 2px; }
.confetti-piece:nth-child(3) { width: 4px; height: 8px; border-radius: 2px; }
.confetti-piece:nth-child(4) { width: 7px; height: 7px; border-radius: 50%; }
.confetti-piece:nth-child(5) { width: 5px; height: 5px; border-radius: 1px; }
.confetti-piece:nth-child(6) { width: 6px; height: 3px; border-radius: 2px; }
.confetti-piece:nth-child(7) { width: 4px; height: 6px; border-radius: 2px; }
.confetti-piece:nth-child(8) { width: 8px; height: 8px; border-radius: 50%; }
.confetti-piece:nth-child(9) { width: 5px; height: 5px; border-radius: 1px; }

/* Confetti colors for each badge */
.badge.ambition.unlocked .confetti-piece:nth-child(1) { background: var(--Verde, #00CD73); left: 15%; top: 0px; animation: confetti-fall-1 2.5s ease-out forwards; }
.badge.ambition.unlocked .confetti-piece:nth-child(2) { background: var(--Rosa, #B40054); left: 25%; top: 0px; animation: confetti-fall-2 2.8s ease-out forwards; }
.badge.ambition.unlocked .confetti-piece:nth-child(3) { background: var(--Laranja, #F50); left: 35%; top: 0px; animation: confetti-fall-3 2.3s ease-out forwards; }
.badge.ambition.unlocked .confetti-piece:nth-child(4) { background: var(--Amarelo, #FFB40F); left: 45%; top: 0px; animation: confetti-fall-4 2.7s ease-out forwards; }
.badge.ambition.unlocked .confetti-piece:nth-child(5) { background: var(--Roxo, #460032); left: 55%; top: 0px; animation: confetti-fall-5 2.4s ease-out forwards; }
.badge.ambition.unlocked .confetti-piece:nth-child(6) { background: var(--Azul, #000164); left: 65%; top: 0px; animation: confetti-fall-6 2.6s ease-out forwards; }
.badge.ambition.unlocked .confetti-piece:nth-child(7) { background: var(--Verde, #00CD73); left: 75%; top: 0px; animation: confetti-fall-7 2.2s ease-out forwards; }
.badge.ambition.unlocked .confetti-piece:nth-child(8) { background: var(--Rosa, #B40054); left: 85%; top: 0px; animation: confetti-fall-8 2.9s ease-out forwards; }
.badge.ambition.unlocked .confetti-piece:nth-child(9) { background: var(--Laranja, #F50); left: 95%; top: 0px; animation: confetti-fall-9 2.1s ease-out forwards; }

.badge.diverse-perspectives.unlocked .confetti-piece:nth-child(1) { background: var(--Verde, #00CD73); left: 12%; top: 0px; animation: confetti-fall-1 2.6s ease-out forwards; }
.badge.diverse-perspectives.unlocked .confetti-piece:nth-child(2) { background: var(--Rosa, #B40054); left: 28%; top: 0px; animation: confetti-fall-2 2.4s ease-out forwards; }
.badge.diverse-perspectives.unlocked .confetti-piece:nth-child(3) { background: var(--Laranja, #F50); left: 42%; top: 0px; animation: confetti-fall-3 2.9s ease-out forwards; }
.badge.diverse-perspectives.unlocked .confetti-piece:nth-child(4) { background: var(--Amarelo, #FFB40F); left: 58%; top: 0px; animation: confetti-fall-4 2.2s ease-out forwards; }
.badge.diverse-perspectives.unlocked .confetti-piece:nth-child(5) { background: var(--Azul, #000164); left: 72%; top: 0px; animation: confetti-fall-5 2.7s ease-out forwards; }
.badge.diverse-perspectives.unlocked .confetti-piece:nth-child(6) { background: var(--Roxo, #460032); left: 18%; top: 0px; animation: confetti-fall-6 2.3s ease-out forwards; }
.badge.diverse-perspectives.unlocked .confetti-piece:nth-child(7) { background: var(--Verde, #00CD73); left: 88%; top: 0px; animation: confetti-fall-7 2.8s ease-out forwards; }
.badge.diverse-perspectives.unlocked .confetti-piece:nth-child(8) { background: var(--Rosa, #B40054); left: 35%; top: 0px; animation: confetti-fall-8 2.1s ease-out forwards; }
.badge.diverse-perspectives.unlocked .confetti-piece:nth-child(9) { background: var(--Laranja, #F50); left: 82%; top: 0px; animation: confetti-fall-9 2.5s ease-out forwards; }

.badge.talent-growth.unlocked .confetti-piece:nth-child(1) { background: var(--Verde, #00CD73); left: 8%; top: 0px; animation: confetti-fall-1 2.7s ease-out forwards; }
.badge.talent-growth.unlocked .confetti-piece:nth-child(2) { background: var(--Rosa, #B40054); left: 22%; top: 0px; animation: confetti-fall-2 2.3s ease-out forwards; }
.badge.talent-growth.unlocked .confetti-piece:nth-child(3) { background: var(--Laranja, #F50); left: 38%; top: 0px; animation: confetti-fall-3 2.8s ease-out forwards; }
.badge.talent-growth.unlocked .confetti-piece:nth-child(4) { background: var(--Amarelo, #FFB40F); left: 52%; top: 0px; animation: confetti-fall-4 2.1s ease-out forwards; }
.badge.talent-growth.unlocked .confetti-piece:nth-child(5) { background: var(--Roxo, #460032); left: 68%; top: 0px; animation: confetti-fall-5 2.6s ease-out forwards; }
.badge.talent-growth.unlocked .confetti-piece:nth-child(6) { background: var(--Azul, #000164); left: 78%; top: 0px; animation: confetti-fall-6 2.4s ease-out forwards; }
.badge.talent-growth.unlocked .confetti-piece:nth-child(7) { background: var(--Verde, #00CD73); left: 15%; top: 0px; animation: confetti-fall-7 2.9s ease-out forwards; }
.badge.talent-growth.unlocked .confetti-piece:nth-child(8) { background: var(--Rosa, #B40054); left: 85%; top: 0px; animation: confetti-fall-8 2.2s ease-out forwards; }
.badge.talent-growth.unlocked .confetti-piece:nth-child(9) { background: var(--Laranja, #F50); left: 45%; top: 0px; animation: confetti-fall-9 2.5s ease-out forwards; }

.badge.collaboration.unlocked .confetti-piece:nth-child(1) { background: var(--Verde, #00CD73); left: 5%; top: 0px; animation: confetti-fall-1 2.4s ease-out forwards; }
.badge.collaboration.unlocked .confetti-piece:nth-child(2) { background: var(--Rosa, #B40054); left: 32%; top: 0px; animation: confetti-fall-2 2.7s ease-out forwards; }
.badge.collaboration.unlocked .confetti-piece:nth-child(3) { background: var(--Laranja, #F50); left: 48%; top: 0px; animation: confetti-fall-3 2.2s ease-out forwards; }
.badge.collaboration.unlocked .confetti-piece:nth-child(4) { background: var(--Amarelo, #FFB40F); left: 62%; top: 0px; animation: confetti-fall-4 2.8s ease-out forwards; }
.badge.collaboration.unlocked .confetti-piece:nth-child(5) { background: var(--Roxo, #460032); left: 78%; top: 0px; animation: confetti-fall-5 2.3s ease-out forwards; }
.badge.collaboration.unlocked .confetti-piece:nth-child(6) { background: var(--Azul, #000164); left: 92%; top: 0px; animation: confetti-fall-6 2.6s ease-out forwards; }
.badge.collaboration.unlocked .confetti-piece:nth-child(7) { background: var(--Verde, #00CD73); left: 18%; top: 0px; animation: confetti-fall-7 2.1s ease-out forwards; }
.badge.collaboration.unlocked .confetti-piece:nth-child(8) { background: var(--Rosa, #B40054); left: 55%; top: 0px; animation: confetti-fall-8 2.9s ease-out forwards; }
.badge.collaboration.unlocked .confetti-piece:nth-child(9) { background: var(--Laranja, #F50); left: 88%; top: 0px; animation: confetti-fall-9 2.5s ease-out forwards; }

.badge.ownership.unlocked .confetti-piece:nth-child(1) { background: var(--Roxo, #460032); left: 11%; top: 0px; animation: confetti-fall-1 2.6s ease-out forwards; }
.badge.ownership.unlocked .confetti-piece:nth-child(2) { background: var(--Rosa, #B40054); left: 26%; top: 0px; animation: confetti-fall-2 2.3s ease-out forwards; }
.badge.ownership.unlocked .confetti-piece:nth-child(3) { background: var(--Laranja, #F50); left: 41%; top: 0px; animation: confetti-fall-3 2.8s ease-out forwards; }
.badge.ownership.unlocked .confetti-piece:nth-child(4) { background: var(--Amarelo, #FFB40F); left: 56%; top: 0px; animation: confetti-fall-4 2.2s ease-out forwards; }
.badge.ownership.unlocked .confetti-piece:nth-child(5) { background: var(--Roxo, #460032); left: 71%; top: 0px; animation: confetti-fall-5 2.7s ease-out forwards; }
.badge.ownership.unlocked .confetti-piece:nth-child(6) { background: var(--Azul, #000164); left: 86%; top: 0px; animation: confetti-fall-6 2.4s ease-out forwards; }
.badge.ownership.unlocked .confetti-piece:nth-child(7) { background: var(--Roxo, #460032); left: 19%; top: 0px; animation: confetti-fall-7 2.1s ease-out forwards; }
.badge.ownership.unlocked .confetti-piece:nth-child(8) { background: var(--Rosa, #B40054); left: 63%; top: 0px; animation: confetti-fall-8 2.9s ease-out forwards; }
.badge.ownership.unlocked .confetti-piece:nth-child(9) { background: var(--Laranja, #F50); left: 94%; top: 0px; animation: confetti-fall-9 2.5s ease-out forwards; }

.badge.learning.unlocked .confetti-piece:nth-child(1) { background: var(--Verde, #00CD73); left: 7%; top: 0px; animation: confetti-fall-1 2.5s ease-out forwards; }
.badge.learning.unlocked .confetti-piece:nth-child(2) { background: var(--Rosa, #B40054); left: 24%; top: 0px; animation: confetti-fall-2 2.8s ease-out forwards; }
.badge.learning.unlocked .confetti-piece:nth-child(3) { background: var(--Laranja, #F50); left: 39%; top: 0px; animation: confetti-fall-3 2.2s ease-out forwards; }
.badge.learning.unlocked .confetti-piece:nth-child(4) { background: var(--Amarelo, #FFB40F); left: 54%; top: 0px; animation: confetti-fall-4 2.7s ease-out forwards; }
.badge.learning.unlocked .confetti-piece:nth-child(5) { background: var(--Roxo, #460032); left: 69%; top: 0px; animation: confetti-fall-5 2.3s ease-out forwards; }
.badge.learning.unlocked .confetti-piece:nth-child(6) { background: var(--Azul, #000164); left: 84%; top: 0px; animation: confetti-fall-6 2.6s ease-out forwards; }
.badge.learning.unlocked .confetti-piece:nth-child(7) { background: var(--Verde, #00CD73); left: 16%; top: 0px; animation: confetti-fall-7 2.9s ease-out forwards; }
.badge.learning.unlocked .confetti-piece:nth-child(8) { background: var(--Rosa, #B40054); left: 47%; top: 0px; animation: confetti-fall-8 2.1s ease-out forwards; }
.badge.learning.unlocked .confetti-piece:nth-child(9) { background: var(--Laranja, #F50); left: 91%; top: 0px; animation: confetti-fall-9 2.4s ease-out forwards; }

/* Staggered unlock animation delays */
.badge.ambition.unlocked { animation: pulse-shine 1s ease-out, pulse 2s infinite 1s 0s; }
.badge.diverse-perspectives.unlocked { animation: pulse-shine 1s ease-out, pulse 2s infinite 1s 0.1s; }
.badge.talent-growth.unlocked { animation: pulse-shine 1s ease-out, pulse 2s infinite 1s 0.2s; }
.badge.collaboration.unlocked { animation: pulse-shine 1s ease-out, pulse 2s infinite 1s 0.3s; }
.badge.ownership.unlocked { animation: pulse-shine 1s ease-out, pulse 2s infinite 1s 0.4s; }
.badge.learning.unlocked { animation: pulse-shine 1s ease-out, pulse 2s infinite 1s 0.5s; }

.badge.unlocked::before,
.badge.unlocked::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
}

.badge.unlocked::before {
    background: var(--Amarelo, #FFB40F);
    top: -10px;
    left: 20%;
    animation: confetti-fall-1 2s ease-out forwards;
}

.badge.unlocked::after {
    background: var(--Rosa, #B40054);
    top: -10px;
    right: 20%;
    animation: confetti-fall-2 2s ease-out forwards;
}

/* Pulse shine effect */
@keyframes pulse-shine {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 currentColor;
    }
    50% { 
        transform: scale(1.15); 
        box-shadow: 0 0 20px 10px currentColor;
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 currentColor;
    }
}

/* Realistic confetti animations with wind effects */
@keyframes confetti-fall-1 {
    0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
    10% { opacity: 1; transform: translateY(-8px) translateX(5px) rotate(45deg); }
    20% { opacity: 1; transform: translateY(15px) translateX(-3px) rotate(90deg); }
    30% { opacity: 1; transform: translateY(35px) translateX(8px) rotate(135deg); }
    40% { opacity: 1; transform: translateY(55px) translateX(-5px) rotate(180deg); }
    50% { opacity: 1; transform: translateY(75px) translateX(12px) rotate(225deg); }
    60% { opacity: 0.9; transform: translateY(95px) translateX(-8px) rotate(270deg); }
    70% { opacity: 0.7; transform: translateY(115px) translateX(6px) rotate(315deg); }
    80% { opacity: 0.5; transform: translateY(135px) translateX(-4px) rotate(360deg); }
    90% { opacity: 0.2; transform: translateY(155px) translateX(3px) rotate(405deg); }
    100% { opacity: 0; transform: translateY(175px) translateX(-2px) rotate(450deg); }
}

@keyframes confetti-fall-2 {
    0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
    10% { opacity: 1; transform: translateY(-12px) translateX(-6px) rotate(-45deg); }
    20% { opacity: 1; transform: translateY(12px) translateX(4px) rotate(-90deg); }
    30% { opacity: 1; transform: translateY(32px) translateX(-7px) rotate(-135deg); }
    40% { opacity: 1; transform: translateY(52px) translateX(9px) rotate(-180deg); }
    50% { opacity: 1; transform: translateY(72px) translateX(-6px) rotate(-225deg); }
    60% { opacity: 0.9; transform: translateY(92px) translateX(11px) rotate(-270deg); }
    70% { opacity: 0.7; transform: translateY(112px) translateX(-9px) rotate(-315deg); }
    80% { opacity: 0.5; transform: translateY(132px) translateX(7px) rotate(-360deg); }
    90% { opacity: 0.2; transform: translateY(152px) translateX(-5px) rotate(-405deg); }
    100% { opacity: 0; transform: translateY(172px) translateX(4px) rotate(-450deg); }
}

@keyframes confetti-fall-3 {
    0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
    10% { opacity: 1; transform: translateY(-6px) translateX(7px) rotate(60deg); }
    20% { opacity: 1; transform: translateY(18px) translateX(-4px) rotate(120deg); }
    30% { opacity: 1; transform: translateY(38px) translateX(6px) rotate(180deg); }
    40% { opacity: 1; transform: translateY(58px) translateX(-8px) rotate(240deg); }
    50% { opacity: 1; transform: translateY(78px) translateX(5px) rotate(300deg); }
    60% { opacity: 0.9; transform: translateY(98px) translateX(-7px) rotate(360deg); }
    70% { opacity: 0.7; transform: translateY(118px) translateX(4px) rotate(420deg); }
    80% { opacity: 0.5; transform: translateY(138px) translateX(-6px) rotate(480deg); }
    90% { opacity: 0.2; transform: translateY(158px) translateX(3px) rotate(540deg); }
    100% { opacity: 0; transform: translateY(178px) translateX(-4px) rotate(600deg); }
}

@keyframes confetti-fall-4 {
    0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
    10% { opacity: 1; transform: translateY(-10px) translateX(-8px) rotate(-60deg); }
    20% { opacity: 1; transform: translateY(8px) translateX(5px) rotate(-120deg); }
    30% { opacity: 1; transform: translateY(28px) translateX(-6px) rotate(-180deg); }
    40% { opacity: 1; transform: translateY(48px) translateX(8px) rotate(-240deg); }
    50% { opacity: 1; transform: translateY(68px) translateX(-5px) rotate(-300deg); }
    60% { opacity: 0.9; transform: translateY(88px) translateX(7px) rotate(-360deg); }
    70% { opacity: 0.7; transform: translateY(108px) translateX(-4px) rotate(-420deg); }
    80% { opacity: 0.5; transform: translateY(128px) translateX(6px) rotate(-480deg); }
    90% { opacity: 0.2; transform: translateY(148px) translateX(-3px) rotate(-540deg); }
    100% { opacity: 0; transform: translateY(168px) translateX(5px) rotate(-600deg); }
}

@keyframes confetti-fall-5 {
    0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
    10% { opacity: 1; transform: translateY(-7px) translateX(9px) rotate(75deg); }
    20% { opacity: 1; transform: translateY(16px) translateX(-5px) rotate(150deg); }
    30% { opacity: 1; transform: translateY(36px) translateX(7px) rotate(225deg); }
    40% { opacity: 1; transform: translateY(56px) translateX(-9px) rotate(300deg); }
    50% { opacity: 1; transform: translateY(76px) translateX(6px) rotate(375deg); }
    60% { opacity: 0.9; transform: translateY(96px) translateX(-8px) rotate(450deg); }
    70% { opacity: 0.7; transform: translateY(116px) translateX(5px) rotate(525deg); }
    80% { opacity: 0.5; transform: translateY(136px) translateX(-7px) rotate(600deg); }
    90% { opacity: 0.2; transform: translateY(156px) translateX(4px) rotate(675deg); }
    100% { opacity: 0; transform: translateY(176px) translateX(-6px) rotate(750deg); }
}

@keyframes confetti-fall-6 {
    0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
    10% { opacity: 1; transform: translateY(-9px) translateX(-7px) rotate(-75deg); }
    20% { opacity: 1; transform: translateY(14px) translateX(6px) rotate(-150deg); }
    30% { opacity: 1; transform: translateY(34px) translateX(-8px) rotate(-225deg); }
    40% { opacity: 1; transform: translateY(54px) translateX(5px) rotate(-300deg); }
    50% { opacity: 1; transform: translateY(74px) translateX(-7px) rotate(-375deg); }
    60% { opacity: 0.9; transform: translateY(94px) translateX(9px) rotate(-450deg); }
    70% { opacity: 0.7; transform: translateY(114px) translateX(-6px) rotate(-525deg); }
    80% { opacity: 0.5; transform: translateY(134px) translateX(8px) rotate(-600deg); }
    90% { opacity: 0.2; transform: translateY(154px) translateX(-5px) rotate(-675deg); }
    100% { opacity: 0; transform: translateY(174px) translateX(7px) rotate(-750deg); }
}

@keyframes confetti-fall-7 {
    0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
    10% { opacity: 1; transform: translateY(-11px) translateX(4px) rotate(30deg); }
    20% { opacity: 1; transform: translateY(10px) translateX(-6px) rotate(60deg); }
    30% { opacity: 1; transform: translateY(30px) translateX(8px) rotate(90deg); }
    40% { opacity: 1; transform: translateY(50px) translateX(-4px) rotate(120deg); }
    50% { opacity: 1; transform: translateY(70px) translateX(6px) rotate(150deg); }
    60% { opacity: 0.9; transform: translateY(90px) translateX(-8px) rotate(180deg); }
    70% { opacity: 0.7; transform: translateY(110px) translateX(5px) rotate(210deg); }
    80% { opacity: 0.5; transform: translateY(130px) translateX(-7px) rotate(240deg); }
    90% { opacity: 0.2; transform: translateY(150px) translateX(3px) rotate(270deg); }
    100% { opacity: 0; transform: translateY(170px) translateX(-5px) rotate(300deg); }
}

@keyframes confetti-fall-8 {
    0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
    10% { opacity: 1; transform: translateY(-5px) translateX(-9px) rotate(-30deg); }
    20% { opacity: 1; transform: translateY(20px) translateX(7px) rotate(-60deg); }
    30% { opacity: 1; transform: translateY(40px) translateX(-5px) rotate(-90deg); }
    40% { opacity: 1; transform: translateY(60px) translateX(9px) rotate(-120deg); }
    50% { opacity: 1; transform: translateY(80px) translateX(-6px) rotate(-150deg); }
    60% { opacity: 0.9; transform: translateY(100px) translateX(8px) rotate(-180deg); }
    70% { opacity: 0.7; transform: translateY(120px) translateX(-4px) rotate(-210deg); }
    80% { opacity: 0.5; transform: translateY(140px) translateX(6px) rotate(-240deg); }
    90% { opacity: 0.2; transform: translateY(160px) translateX(-3px) rotate(-270deg); }
    100% { opacity: 0; transform: translateY(180px) translateX(5px) rotate(-300deg); }
}

@keyframes confetti-fall-9 {
    0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
    10% { opacity: 1; transform: translateY(-13px) translateX(3px) rotate(90deg); }
    20% { opacity: 1; transform: translateY(6px) translateX(-8px) rotate(180deg); }
    30% { opacity: 1; transform: translateY(26px) translateX(5px) rotate(270deg); }
    40% { opacity: 1; transform: translateY(46px) translateX(-7px) rotate(360deg); }
    50% { opacity: 1; transform: translateY(66px) translateX(9px) rotate(450deg); }
    60% { opacity: 0.9; transform: translateY(86px) translateX(-6px) rotate(540deg); }
    70% { opacity: 0.7; transform: translateY(106px) translateX(4px) rotate(630deg); }
    80% { opacity: 0.5; transform: translateY(126px) translateX(-8px) rotate(720deg); }
    90% { opacity: 0.2; transform: translateY(146px) translateX(6px) rotate(810deg); }
    100% { opacity: 0; transform: translateY(166px) translateX(-4px) rotate(900deg); }
}

/* ========================================
   CHALLENGE DETAIL PAGES
   ======================================== */

/* Center content vertically on challenge detail pages */
.challenge-detail-container .left-panel {
    justify-content: flex-start !important;
}

.challenge-detail-container .header {
    margin-bottom: 3em !important;
}

.challenge-detail-container .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5em;
    min-height: 60vh;
}

.challenge-detail-container .footer {
    margin-top: auto !important;
}

.challenge-detail-container .intro-text {
    margin-bottom: 0 !important;
}

.challenge-detail-container .mission-section {
    margin: 0 !important;
}

.challenge-detail-container .explanation {
    margin: 0 !important;
}

.challenge-completed {
    text-align: center;
    padding: 0.5em;
    background: rgba(0, 205, 115, 0.1);
    border: 2px solid var(--Verde, #00CD73);
    border-radius: 8px;
    margin: 0;
}

.challenge-completed p {
    margin: 0.2em 0;
    color: var(--Verde, #00CD73);
    font-weight: bold;
    line-height: 1em;
    font-size: 0.6em;
}

.challenge-completed p:first-child {
    font-size: 1em;
}

.challenge-completed p:last-child {
    font-size: 0.6em;
    font-weight: normal;
    opacity: 0.8;
}

/* Challenge-specific colors for challenge-completed element */
.ambition-bg .challenge-completed {
    background: rgba(0, 205, 115, 0.1);
    border-color: var(--Verde, #00CD73);
}

.ambition-bg .challenge-completed p {
    color: var(--Verde, #00CD73);
}

.perspectives-bg .challenge-completed {
    background: rgba(180, 0, 84, 0.1);
    border-color: var(--Rosa, #B40054);
}

.perspectives-bg .challenge-completed p {
    color: var(--Rosa, #B40054);
}

.talent-bg .challenge-completed {
    background: rgba(255, 85, 0, 0.1);
    border-color: var(--Laranja, #F50);
}

.talent-bg .challenge-completed p {
    color: var(--Laranja, #F50);
}

.ownership-bg .challenge-completed {
    background: rgba(70, 0, 50, 0.1);
    border-color: var(--Roxo, #460032);
}

.ownership-bg .challenge-completed p {
    color: var(--Roxo, #460032);
}

.collaboration-bg .challenge-completed {
    background: rgba(0, 1, 100, 0.1);
    border-color: var(--Azul, #000164);
}

.collaboration-bg .challenge-completed p {
    color: var(--Azul, #000164);
}

.learning-bg .challenge-completed {
    background: rgba(180, 0, 84, 0.1);
    border-color: var(--Rosa, #B40054);
}

.learning-bg .challenge-completed p {
    color: var(--Rosa, #B40054);
}

/* Override inline margin for forms inside challenge-completed */
.challenge-completed form {
    margin-top: 0.2em !important;
}

/* ========================================
   MODAL STYLES
   ======================================== */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 1.875em;
    border-radius: 0.9375em;
    width: 90%;
    max-width: 25em;
    position: relative;
}

.close {
    color: var(--Cinza-escuro, #A2A4A3);
    float: right;
    font-size: 1.75em;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 1.25em;
    top: 0.9375em;
}

.close:hover {
    color: var(--Roxo, #460032);
}

/* ========================================
   CHALLENGE DETAIL PAGES
   ======================================== */

.challenge-detail-container {
    display: flex;
    height: 100vh;
}

.challenge-detail-container .left-panel {
    width: 40%;
    background: white;
    padding: 1.75em 4em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.challenge-detail-container .right-panel {
    width: 60%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Challenge detail background colors */
.ambition-bg { background: var(--Azul, #000164); }

/* Hide mobile mission section on desktop */
.mobile-mission-section {
    display: none;
}

/* Logo link styling */
.logo a {
    display: block;
    text-decoration: none;
}

.logo a:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.perspectives-bg { background: var(--Roxo, #460032); }
.talent-bg { background: var(--Rosa, #B40054); }
.collaboration-bg { background: var(--Verde, #00CD73); }
.ownership-bg { background: var(--Laranja, #F50); }
.learning-bg { background: var(--Amarelo, #FFB40F); }

.challenge-detail-content {
    width: 100%;
    padding: 1.875em var(--challenge-detail-padding) var(--challenge-detail-padding) var(--challenge-detail-padding);
    color: white;
}

.challenge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--challenge-detail-margin);
}

.back-arrow {
    text-decoration: none;
    transition: opacity 0.3s ease;
    display: inline-block;
    color: white;
}

.back-icon {
    width: 1.5em;
    height: auto;
    transition: opacity 0.3s ease;
}

.back-icon path {
    fill: white;
}

.back-arrow:hover .back-icon {
    opacity: 0.7;
}

.challenge-title-section {
    text-align: right;
}

.challenge-title {
    font-size: var(--challenge-detail-title-size);
    font-weight: 700;
    line-height: 1.1;
}

.challenge-detail-content .challenge-date {
    font-size: var(--challenge-detail-date-size);
    font-weight: 400;
    color: white;
    margin: 0;
}

.icon-definition-row {
    display: flex;
    align-items: center;
    gap: 5em;
    margin-bottom: var(--challenge-detail-margin);
}

.challenge-icon {
    flex-shrink: 0;
}

.challenge-icon img {
    width: 15em;
    height: 15em;
    object-fit: contain;
}

.challenge-content {
    line-height: 1.6;
}

.definition-section {
    flex: 1;
    text-align: left;
}

.challenge-section,
.reminder-section {
    margin-bottom: var(--challenge-detail-margin);
}

.definition-section h3 {
    font-size: 1.6em;
    font-weight: 600;
    margin-bottom: 0;
    margin-right: 0.5em;
    display: inline;
    color: white;
}

.challenge-section h3,
.reminder-section h3 {
    font-size: var(--challenge-detail-p-size);
    font-weight: 600;
    margin-bottom: 0;
    margin-right: 0.5em;
    display: inline;
    color: white;
}

/* Challenge detail section heading colors */
.ambition-bg .definition-section h3,
.ambition-bg .challenge-section h3,
.ambition-bg .reminder-section h3 { color: var(--Verde, #00CD73); }

.perspectives-bg .definition-section h3,
.perspectives-bg .challenge-section h3,
.perspectives-bg .reminder-section h3 { color: var(--Rosa, #B40054); }

.talent-bg .definition-section h3,
.talent-bg .challenge-section h3,
.talent-bg .reminder-section h3 { color: var(--Laranja, #F50); }

.ownership-bg .definition-section h3,
.ownership-bg .challenge-section h3,
.ownership-bg .reminder-section h3 { color: var(--Roxo, #460032); }

.collaboration-bg .definition-section h3,
.collaboration-bg .challenge-section h3,
.collaboration-bg .reminder-section h3 { color: var(--Azul, #000164); }

.learning-bg .definition-section h3,
.learning-bg .challenge-section h3,
.learning-bg .reminder-section h3 { color: var(--Rosa, #B40054); }

.definition-section p {
    font-size: var(--challenge-detail-h3-size);
    margin-bottom: 1.25em;
    display: inline;
    color: white;
}

.challenge-section p,
.reminder-section p {
    font-size: var(--challenge-detail-p-size);
    margin-bottom: 1.25em;
    display: inline;
    color: white;
}

.response-input {
    margin: 1.5em 0;
}

.response-input textarea {
    width: 100%;
    padding: 1em;
    border: 0.125em solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1em;
    font-family: 'PolySans', sans-serif;
    resize: vertical;
    min-height: 6em;
}

.response-input textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.response-display {
    margin: 1.5em 0;
}

.response-display h4 {
    color: white;
    font-size: 1.1em;
    margin-bottom: 0.75em;
    font-weight: 600;
}

.response-text {
    width: 100%;
    padding: 1em;
    border: 0.125em solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1em;
    font-family: 'PolySans', sans-serif;
    min-height: 6em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.challenge-actions {
    display: flex;
    gap: 1.5em;
    margin-top: 3em;
}

.btn-start,
.btn-complete,
.btn-leaderboard {
    padding: 1em 2em;
    border: none;
    border-radius: 0;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'PolySans', sans-serif;
    height: 3.5em;
    box-sizing: border-box;
}

.btn-start {
    background: var(--Roxo, #460032);
    color: white;
}

.btn-complete {
    background: var(--Rosa, #B40054);
    color: white;
}

.btn-leaderboard {
    background: var(--Azul, #000164);
    color: white;
}

.btn-start:hover,
.btn-complete:hover,
.btn-leaderboard:hover {
    transform: translateY(-0.125em);
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
}

/* Challenge page specific button styling - colors to match theme */
.ambition-bg .btn-start,
.ambition-bg .btn-complete {
    background: var(--Verde, #00CD73);
    color: white;
}

.perspectives-bg .btn-start,
.perspectives-bg .btn-complete {
    background: var(--Rosa, #B40054);
    color: white;
}

.talent-bg .btn-start,
.talent-bg .btn-complete {
    background: var(--Laranja, #F50);
    color: white;
}

.collaboration-bg .btn-start,
.collaboration-bg .btn-complete {
    background: var(--Azul, #000164);
    color: white;
}

.ownership-bg .btn-start,
.ownership-bg .btn-complete {
    background: var(--Roxo, #460032);
    color: white;
}

.learning-bg .btn-start,
.learning-bg .btn-complete {
    background: var(--Rosa, #B40054);
    color: white;
}

/* Feedback Form Styles */
body.feedback-form-page {
    overflow: auto !important;
    height: auto !important;
    background-image: url('images/pink_purple_bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.feedback-form-container {
    display: flex;
    flex-direction: column;
    background: white;
    min-height: 85vh;
    min-width: 95vw;
    height: auto;
    margin: 70px;
}

.header-row {
    display: flex;
    background: white;
    padding: 2rem;
}

.header-content {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.content-row {
    display: flex;
    background: white;
}

.title-column {
    flex: 0 0 27%;
    background: white;
    padding: 2rem 50px 2rem 80px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 33%;
}

.content-column {
    flex: 1;
    background: white;
    padding: 2rem 80px 2rem 2rem;
}

.content-section {
    width: 100%;
}

.content-section p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--Roxo, #460032);
    margin-bottom: 1rem;
    font-weight: 300;
}

.content-section strong {
    font-weight: 600;
}

.rules-list {
    list-style: none;
    padding: 0;
}

.rules-list li {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--Roxo, #460032);
    font-weight: 300;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
}

.rules-list li::before {
    content: "•";
    color: var(--Rosa, #B40054);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.section-title {
    margin-bottom: 0;
}

.section-prefix {
    font-size: 1.3rem;
    color: var(--Roxo, #460032);
    font-weight: 300;
}

.section-main {
    font-size: 3.5rem;
    color: var(--Rosa, #B40054);
    font-weight: 600;
    line-height: 1.1;
}

.feedback-form {
    background: white;
    padding: 0;
    border: none;
    box-shadow: none;
    width: 100%;
}

.form-section {
    margin-bottom: 0;
}

.form-group {
    margin-bottom: 2rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--Roxo, #460032);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group label span {
    text-transform: none;
    font-weight: 300;
}

.form-group label[for="feedback_text"] {
    text-transform: none;
}

/* Quill Editor Styling */
.ql-editor {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    min-height: 150px;
}

.ql-toolbar {
    border-top: 2px solid #e1e5e9;
    border-left: 2px solid #e1e5e9;
    border-right: 2px solid #e1e5e9;
    border-bottom: none;
}

.ql-container {
    border: 2px solid #e1e5e9;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.ql-toolbar {
    border-radius: 4px 4px 0 0;
}

.ql-editor.ql-blank::before {
    color: #999;
    font-style: italic;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e1e5e9;
    border-radius: 4px;
    font-size: 1.3rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
    color: var(--Rosa, #B40054);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--Rosa, #B40054);
    opacity: 0.6;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--Rosa, #B40054);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group small {
    display: block;
    font-size: 0.85rem;
    color: var(--Roxo, #460032);
    margin-top: 0.5rem;
}

.question-description {
    font-size: 0.9rem;
    color: var(--Roxo, #460032);
    margin-bottom: 1rem;
    line-height: 1.4;
    font-weight: 300;
}

.question-description strong {
    text-transform: uppercase;
    font-weight: 600;
}

.submit-btn {
    background: var(--Rosa, #B40054);
    color: white;
    border: none;
    padding: 1rem;
    font-size: 0.9rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 220px;
    margin-top: 2rem;
}

.submit-btn:hover {
    background: #9a0047;
    transform: translateY(-2px);
}

.submit-btn:active {
    transform: translateY(0);
}

/* Mobile responsiveness for feedback form */
@media (max-width: 768px) {
    .feedback-form-container {
        margin: 20px;
        border-radius: 4px;
    }
    
    .header-row,
    .content-row {
        flex-direction: column;
    }
    
    .title-column,
    .content-column {
        flex: none;
        padding: 1rem;
    }
    
    .section-main {
        font-size: 2rem;
    }
}

@media (min-width: 1280px) and (max-width: 1535px) {
    .section-main {
        font-size: 3rem;
    }
    
    .results-container .section-main {
        font-size: 3rem;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 1rem 2rem;
    }
    
    .feedback-form-container {
        min-height: 75vh;
    }
}

@media (min-width: 1536px) {
    .section-main {
        font-size: 3.5rem;
    }
    
    .feedback-form {
        padding: 0;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 1rem !important;
    }
    
    .feedback-form-container {
        min-height: 80vh;
    }
}

/* Quiz styling for specific resolutions - all properties use !important */
@media (min-width: 1280px) and (max-width: 1535px) {
    .quiz-header {
        padding: 1rem 1rem 0 1rem !important;
    }
    
    .quiz-content {
        padding: 1rem 80px !important;
    }
    
    .quiz-footer {
        padding: 1rem !important;
    }
    
    .question-text {
        font-size: 1.4rem !important;
    }
    
    .answer-text {
        font-size: 1.4em !important;
    }
    
    .answer-option {
        height: 140px !important;
    }
    
    .score-display {
        height: 140px !important;
        width: 140px !important;
        min-height: 140px !important;
        min-width: 140px !important;
        --b: 9px !important;
    }
    
    .score-points {
        font-size: 60px !important;
    }
    
    .team-name {
        font-size: 0.8rem !important;
    }
    
    .question-counter {
        font-size: 0.6rem !important;
    }
}

@media (min-width: 1536px) and (max-width: 1919px) {
    .quiz-header {
        padding: 1rem 1rem 0 1rem !important;
    }
    
    .quiz-content {
        padding: 1rem 80px !important;
    }
    
    .quiz-footer {
        padding: 1rem !important;
    }
    
    .question-text {
        font-size: 1.4rem !important;
    }
    
    .answer-text {
        font-size: 1.4em !important;
    }
    
    .answer-option {
        height: 140px !important;
    }
    
    .score-display {
        height: 140px !important;
        width: 140px !important;
        min-height: 140px !important;
        min-width: 140px !important;
        --b: 9px !important;
    }
    
    .score-points {
        font-size: 60px !important;
    }
    
    .team-name {
        font-size: 0.8rem !important;
    }
    
    .question-counter {
        font-size: 0.6rem !important;
    }
}

@media (min-width: 1920px) {
    .quiz-header {
        padding: 1rem 1rem 0 1rem !important;
    }
    
    .quiz-content {
        padding: 1rem 80px !important;
    }
    
    .quiz-footer {
        padding: 1rem !important;
    }
    
    .question-text {
        font-size: 1.4rem !important;
    }
    
    .answer-text {
        font-size: 1.4em !important;
    }
    
    .answer-option {
        height: 140px !important;
    }
    
    .score-display {
        height: 140px !important;
        width: 140px !important;
        min-height: 140px !important;
        min-width: 140px !important;
        --b: 9px !important;
    }
    
    .score-points {
        font-size: 60px !important;
    }
    
    .team-name {
        font-size: 0.8rem !important;
    }
    
    .question-counter {
        font-size: 0.6rem !important;
    }
}


/* Challenge page specific back button styling - colors to match titles and buttons */
.ambition-bg .back-icon path {
    fill: var(--Verde, #00CD73);
}

.perspectives-bg .back-icon path {
    fill: var(--Rosa, #B40054);
}

.talent-bg .back-icon path {
    fill: var(--Laranja, #F50);
}

.collaboration-bg .back-icon path {
    fill: var(--Azul, #000164);
}

.ownership-bg .back-icon path {
    fill: var(--Roxo, #460032);
}

.learning-bg .back-icon path {
    fill: var(--Rosa, #B40054);
}

/* ========================================
   ZOOM ADAPTATIONS (125% Windows Zoom)
   ======================================== */

/* Handle 125% zoom - effective viewport becomes ~1536x864 */
/* Also handle 150% zoom on 1920x1080 - effective viewport becomes 1280px */
/* This query should override the 1280px query for zoom scenarios */
@media (max-width: 1600px) and (min-width: 1200px) {
    :root {
        /* Override CSS custom properties for 125% zoom */
        --main-title-size: 3.5em;
        --main-heading-size: 3em;
        --mission-answer-size: 4.5em;
        --challenge-name-size: 4em;
        --badge-name-size: 2.5em;
        --left-panel-padding: 1.5em 3.5em;
        --challenge-info-right: 2em;
        --modal-max-width: 22em;
        --button-padding: 1em;
        --challenge-detail-padding: 5.5em;
        --nav-links-gap: 1em;
        --metrics-gap: 2em;
        --badge-icon-size: 9em;
        --form-input-padding: 0.875em 0;
        --challenge-icon-size: 13em;
        --welcome-text-size: 1em;
        --intro-text-size: .9em;
        --explanation-text-size: .9em;
        --instructions-text-size: .9em;
        --logo-max-width: 10em;
        --logo-margin-bottom: 2em;
        --metric-number-size: 3em;
        --metric-label-size: 1.2em;
        --header-margin-bottom: 1.8em;
        --cta-text-size: .9em;
        --metrics-margin: 1.5em 0;
        --instructions-margin: 2em 0;
        --welcome-line-height: 1.3;
        --intro-line-height: 1.3;
        --explanation-line-height: 1.3;
        --instructions-line-height: 1.3;
        --nav-links-font-size: 0.7em;
        --challenge-date-size: 1em;
        --challenge-detail-title-size: 3em;
        --challenge-detail-date-size: 1em;
        --challenge-detail-h3-size: 1.2em;
        --challenge-detail-p-size: 0.9em;
        --challenge-detail-margin: 1.5em;
    }
    
    /* Apply the adjusted values */
    .main-title h1 { font-size: var(--main-title-size); }
    .main-heading { font-size: var(--main-heading-size); }
    .mission-answer { font-size: var(--mission-answer-size); }
    .challenge-name { font-size: var(--challenge-name-size); }
    .badge-name { font-size: var(--badge-name-size); }
    .left-panel { padding: var(--left-panel-padding); overflow-y: scroll;}
    .right-panel { overflow-y: scroll;}
    .challenge-detail-container .right-panel {
        align-items: flex-start;
        justify-content: center;
        overflow-y: auto;
        padding: 2em 0;
    }
    .challenge-info { right: var(--challenge-info-right); }
    .modal-content { max-width: var(--modal-max-width); }
    .submit-btn, .btn { padding: var(--button-padding); }
    .challenge-detail-content { padding: 1.5em var(--challenge-detail-padding) var(--challenge-detail-padding) var(--challenge-detail-padding); }
    .nav-links { gap: var(--nav-links-gap); }
    .metrics { gap: var(--metrics-gap); }
    .badge-icon { width: var(--badge-icon-size); height: var(--badge-icon-size); }
    .form-group input { padding: var(--form-input-padding); }
    .challenge-icon img { width: var(--challenge-icon-size); height: var(--challenge-icon-size); }
    .welcome-message h2, .welcome-message p { font-size: var(--welcome-text-size); }
    .intro-text p { font-size: var(--intro-text-size); }
    .explanation p { font-size: var(--explanation-text-size); }
    .instructions p { font-size: var(--instructions-text-size); }
    .logo { margin-bottom: var(--logo-margin-bottom); }
    .logo img { max-width: var(--logo-max-width); }
    .metric-number { font-size: var(--metric-number-size); }
    .metric-label { font-size: var(--metric-label-size); }
    .header { margin-bottom: var(--header-margin-bottom); }
    .cta-text { font-size: var(--cta-text-size); }
    .metrics { margin: var(--metrics-margin); }
    .instructions { margin: var(--instructions-margin); }
    .welcome-message p { line-height: var(--welcome-line-height); }
    .intro-text p { line-height: var(--intro-line-height); }
    .explanation p { line-height: var(--explanation-line-height); }
    .instructions p { line-height: var(--instructions-line-height); }
    .nav-links a { font-size: var(--nav-links-font-size); }
    .challenge-date { font-size: var(--challenge-date-size); }
    .challenge-title { font-size: var(--challenge-detail-title-size); }
    .challenge-detail-content .challenge-date { font-size: var(--challenge-detail-date-size); }
    .definition-section h3 { font-size: 1.3em; }
    .challenge-section h3, .reminder-section h3 { font-size: var(--challenge-detail-p-size); }
    .definition-section p { font-size: var(--challenge-detail-h3-size); }
    .challenge-section p, .reminder-section p { font-size: var(--challenge-detail-p-size); }
    .challenge-detail-content { padding: 1.5em var(--challenge-detail-padding) var(--challenge-detail-padding) var(--challenge-detail-padding); }
    .challenge-header { margin-bottom: var(--challenge-detail-margin); }
    .icon-definition-row { gap: 3em; margin-bottom: var(--challenge-detail-margin); }
    .challenge-section, .reminder-section { margin-bottom: var(--challenge-detail-margin); }
    
    /* Handle section-main font size for zoom scenarios - higher specificity */
    body .section-main {
        font-size: 3rem !important;
    }
    
    body .results-container .section-main {
        font-size: 3rem !important;
    }
    
    /* Quiz styling for zoom scenarios - override the 1280px query */
    .quiz-header {
        padding: 1rem 1rem 0 1rem !important;
    }
    
    .quiz-content {
        padding: 1rem 80px !important;
    }
    
    .quiz-footer {
        padding: 1rem !important;
    }
    
    .question-text {
        font-size: 1.4rem !important;
    }
    
    .answer-text {
        font-size: 1.2em !important;
    }
    
    .answer-option {
        height: 140px !important;
    }
    
    .score-display {
        height: 140px !important;
        width: 140px !important;
        min-height: 140px !important;
        min-width: 140px !important;
        --b: 9px !important;
    }
    
    .score-points {
        font-size: 60px !important;
    }
    
    .team-name {
        font-size: 0.8rem !important;
    }
    
    .question-counter {
        font-size: 0.6rem !important;
    }
    
}

/* Specific handling for 125% zoom scenario */
@media (max-width: 1540px) and (min-width: 1500px) {
    /* Additional fine-tuning for the exact 125% zoom range */
    .challenge-info {
        right: 1.8em;
    }
    
    .left-panel {
        padding: 1.4em 3.2em;
    }
    
    .challenge-name {
        font-size: 3.8em;
    }
    
    .badge-name {
        font-size: 2.3em;
    }

    .logo {
        margin-bottom: 1.8em;
    }
    
    .logo img {
        max-width: 7.5em;
    }

    .metric-number {
        font-size: 3em;
    }
    
    .metric-label {
        font-size: 1.3em;
    }

    .header {
        margin-bottom: 1.6em;
    }

    .cta-text {
        font-size: 0.9em;
    }

    .metrics {
        margin: 1.3em 0;
    }

    .instructions {
        margin: 1.8em 0;
    }

    .welcome-message p,
    .intro-text p,
    .explanation p,
    .instructions p {
        line-height: 1.25;
    }

    .nav-links a {
        font-size: 0.7em;
    }
    
    .challenge-date {
        font-size: 0.9em;
    }
    
    /* Fine-tune challenge detail elements for exact 125% zoom */
    .challenge-title {
        font-size: 2.8em;
    }
    
    .challenge-detail-content .challenge-date {
        font-size: 0.9em;
    }
    
    .definition-section h3 {
        font-size: 1.2em;
    }
    
    .challenge-section h3,
    .reminder-section h3 {
        font-size: 0.85em;
    }
    
    .definition-section p {
        font-size: 1.1em;
    }
    
    .challenge-section p,
    .reminder-section p {
        font-size: 0.85em;
    }
    
    .challenge-detail-content {
        padding: 1.25em 4.5em 4.5em 4.5em;
    }
    
    .challenge-header {
        margin-bottom: 1.3em;
    }
    
    .icon-definition-row {
        gap: 2.6em;
        margin-bottom: 1.3em;
    }
    
    .challenge-section,
    .reminder-section {
        margin-bottom: 1.3em;
    }
    
    /* Fix challenge detail panel overflow and alignment */
    .challenge-detail-container .right-panel {
        align-items: flex-start;
        justify-content: center;
        overflow-y: auto;
        padding: 2em 0;
    }
}
/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .login-container,
    .change-password-container,
    .welcome-container,
    .challenges-container,
    .members-container,
    .challenge-detail-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    
    /* Tablet and medium mobile badges layout */
    .members-container .right-panel {
        height: auto !important;
        min-height: auto !important;
    }
    
    .badges-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 0;
        padding: 0;
        align-items: stretch;
    }
    
    .badge {
        width: 100%;
        max-width: none;
        height: 250px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0;
    }
    
    .badge-icon {
        width: auto;
        height: 50%;
        margin-bottom: 1.2em;
        margin-right: 0;
    }
    
    .badge-name {
        font-size: 2em;
        text-align: center;
    }
    
    /* Disable hover effects on tablet/mobile */
    .badge:not(.locked).hovering {
        transform: none;
        box-shadow: none;
        z-index: auto;
    }
    
    .badge:not(.locked).hovering::before,
    .badge:not(.locked).hovering::after {
        display: none;
    }
    
    /* Challenge detail pages mobile layout */
    .challenge-detail-container .left-panel {
        width: 100% !important;
        padding: 1.5em 1.25em !important;
        order: 1;
        display: block; /* Show the mission text on mobile */
        position: relative;
        z-index: 2;
        height: auto !important;
        min-height: auto !important;
        flex: none !important;
        justify-content: flex-start !important;
    }
    
    .challenge-detail-container .main-content {
        min-height: auto !important;
        justify-content: flex-start !important;
    }
    
    .challenge-detail-container .right-panel {
        width: 100% !important;
        order: 2;
        min-height: auto;
        position: relative;
        z-index: 1;
    }
    
    .challenge-detail-container .challenge-detail-content {
        padding: 1.5em 1.25em;
    }
    
    .challenge-detail-container .challenge-header {
        margin-bottom: 1.5em;
    }
    
    .challenge-detail-container .challenge-title {
        font-size: 2.5em;
        line-height: 1.1;
    }
    
    .challenge-detail-container .challenge-date {
        font-size: 0.9em;
        margin-top: 0.5em;
    }
    
    .challenge-detail-container .icon-definition-row {
        flex-direction: column;
        gap: 1em;
        margin-bottom: 1.5em;
    }
    
    .challenge-detail-container .challenge-icon {
        align-self: center;
    }
    
    .challenge-detail-container .definition-section h3 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }
    
    .challenge-detail-container .definition-section p {
        font-size: 0.95em;
        line-height: 1.4;
    }
    
    .challenge-detail-container .challenge-content {
        gap: 1.5em;
    }
    
    .challenge-detail-container .challenge-section h3,
    .challenge-detail-container .reminder-section h3 {
        font-size: 1.2em;
        margin-bottom: 0.75em;
    }
    
    .challenge-detail-container .challenge-section p,
    .challenge-detail-container .reminder-section p {
        font-size: 0.95em;
        line-height: 1.5;
    }
    
    .challenge-detail-container .challenge-actions {
        margin-top: 1.5em;
    }
    
    .challenge-detail-container .btn-start,
    .challenge-detail-container .btn-complete {
        width: 100%;
        padding: 1em;
        font-size: 1em;
        margin-bottom: 0.75em;
    }
    
    /* Mobile mission section styling */
    .mobile-mission-section {
        display: block;
        margin-bottom: 2em;
        text-align: center;
    }
    
    .mobile-mission-section .mission-question {
        color: white;
        font-size: 1em;
        margin-bottom: 0.5em;
    }
    
    .mobile-mission-section .mission-answer {
        color: var(--Rosa, #B40054);
        font-size: 2.5em;
        font-weight: bold;
        line-height: 1.1;
    }
    
    /* Mobile login layout: image on top, form below */
    .login-container {
        flex-direction: column-reverse;
    }
    
    .left-panel {
        width: 100%;
        padding: 2.5em 1.875em;
    }
    
    /* Reduce padding for welcome page on mobile */
    .welcome-container .left-panel {
        padding: 1.5em 1.25em;
    }
    
    .right-panel {
        width: 100%;
    }
    
    /* Hide image on mobile for welcome page to prevent content cutoff */
    .welcome-container .right-panel {
        display: none;
    }
    
    /* Adjust welcome container for mobile - use full height */
    .welcome-container {
        height: 100vh;
        overflow-y: auto;
    }
    
    .header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1.25em;
    }
    
    .nav-links {
        justify-content: center;
    }
    
    /* Show hamburger menu and hide nav links on mobile */
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-links {
        display: none;
    }
    
    /* Mobile-specific adjustments for sign-in spacing */
    .signin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
        margin-bottom: 2.5em;
    }
    
    .signin-title {
        font-size: 1.8em;
        margin-bottom: 0.5em;
    }
    
    .signin-subtitle {
        font-size: 0.85em;
        margin-bottom: 1em;
        text-align: left;
    }
    
    .main-title h1 {
        font-size: 1.75em;
    }
    
    /* Smaller title for welcome page on mobile */
    .welcome-container .main-title h1 {
        font-size: 2.5em;
        line-height: 1.1;
    }
    
    /* Reduce margins for welcome page sections on mobile */
    .welcome-container .welcome-message {
        margin-bottom: 1.5em;
    }
    
    .welcome-container .metrics {
        margin: 1.5em 0;
        gap: 1.5em;
    }
    
    .welcome-container .instructions {
        margin: 1.5em 0;
    }
    
    .welcome-container .cta-section {
        margin: 1.5em 0;
    }
    
    /* Mobile metric sizes for welcome page */
    .welcome-container .metric-number {
        font-size: 4em;
    }
    
    .welcome-container .metric-label {
        font-size: 1.4em;
    }
    
    .mission-answer {
        font-size: 1.75em;
    }
    
    .main-heading {
        font-size: 1.75em;
    }
    
    .metrics {
        justify-content: center;
        gap: 1.25em;
    }
    
    .challenges-container .right-panel {
        height: 50vh;
    }
    
    .challenges-grid {
        height: 50vh;
    }
    
    /* Adjust individual challenge rows for mobile */
    .challenge-row {
        height: calc(50vh / 6) !important;
        min-height: 60px;
    }
    
    .challenge-info {
        padding: 0 1.25em;
    }
    
    .challenge-name {
        font-size: 1.2em;
    }
    
    .challenge-date {
        font-size: 0.7em;
    }
    
    /* Ensure proper default colors on mobile */
    .challenge-row .challenge-name {
        color: var(--challenge-color) !important;
    }
    
    .challenge-row .challenge-date {
        color: var(--challenge-color) !important;
    }
    
    /* Keep hover effects but ensure they work properly */
    .challenge-row:hover .challenge-name {
        color: white !important;
    }
    
    .challenge-row:hover .challenge-date {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Mobile mission text sizes */
    .mission-answer {
        font-size: 3em;
    }
    
    .mission-question {
        font-size: 1.3em;
    }
    
    .challenge-graph {
        width: 100%;
    }
    
    .challenge-row:hover .challenge-graph {
        width: 150%;
    }
    
    .challenge-info {
        right: 1.25em;
    }
    
    .challenge-name {
        font-size: 2em;
    }
    
    .members-container .right-panel {
        height: auto;
    }
    
    .badges-grid {
        height: auto;
    }
    
    .badge-icon {
        width: 3.75em;
        height: 3.75em;
        margin-bottom: 0.625em;
    }
    
    .badge-name {
        font-size: 0.875em;
    }
    
    .modal-content {
        margin: 10% auto;
        padding: 1.25em;
    }
}

@media (max-width: 480px) {
    .left-panel {
        padding: 1.875em 1.25em;
    }
    
    .modal-content {
        margin: 10% auto;
        padding: 1.25em;
    }
    
    .challenge-info {
        padding: 0 0.9375em;
        right: 0.9375em;
    }
    
    .challenge-graph {
        width: 100%;
    }
    
    .challenge-row:hover .challenge-graph {
        width: 150%;
    }
    
    /* Mobile badges layout - single column */
    .members-container .right-panel {
        height: auto !important;
        min-height: auto !important;
        padding: 0;
    }
    
    .badges-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 0;
        padding: 0;
        align-items: stretch;
    }
    
    .badge {
        width: 100%;
        max-width: none;
        height: 220px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0;
    }
    
    .badge-icon {
        width: auto;
        height: 50%;
        margin-bottom: 1em;
        margin-right: 0;
    }
    
    .badge-name {
        font-size: 2em;
        text-align: center;
    }
    
    /* Disable hover effects on mobile */
    .badge:not(.locked).hovering {
        transform: none;
        box-shadow: none;
        z-index: auto;
    }
    
    .badge:not(.locked).hovering::before,
    .badge:not(.locked).hovering::after {
        display: none;
    }
    
    .challenge-name {
        font-size: 1.5em;
    }
    
    .challenge-date {
        font-size: 0.625em;
    }
    
    .challenge-detail-content {
        padding: 1em 3em 2em 3em;
    }
    
    .challenge-title {
        font-size: 2.5em;
    }
    
    .icon-definition-row {
        flex-direction: column;
        gap: 3em;
        text-align: center;
    }
    
    .challenge-icon img {
        width: 9em;
        height: 9em;
    }
    
    .challenge-actions {
        flex-direction: column;
        gap: 1em;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* ========================================
   QUIZ STYLES
   ======================================== */

/* Quiz Container */
.quiz-container {
    display: flex;
    flex-direction: column;
    background: white;
    min-height: 85vh;
    min-width: 95vw;
    min-width: 90%;
    margin: 70px;
    position: relative;
}

.quiz-header {
    display: flex;
    background: white;
    padding: 2rem;
    border-bottom: 1px solid #eee;
}

.quiz-content {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 2rem 80px;
    flex: 1;
    min-height: 0;
}

.question-section {
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Instruction Text */
.instruction-text {
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--Cinza-escuro, #A2A4A3);
    font-weight: 300;
    margin-bottom: 1.5rem;
    font-style: italic;
    text-align: center;
    opacity: 0;
    animation: fadeInInstruction 0.8s ease-out 0.5s forwards;
}

@keyframes fadeInInstruction {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.answers-section {
    flex: 1;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.answers-section.show {
    opacity: 1;
}

/* Question Text */
.question-text {
    font-size: 1.8rem;
    line-height: 1.4;
    color: var(--Roxo, #460032);
    font-weight: 400;
    margin-bottom: 0;
    opacity: 0;
    width: 100%;
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
    text-align: center;
    hyphens: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.question-text.typing {
    opacity: 1;
}

.question-word {
    display: inline-block;
    white-space: nowrap;
}

.question-char {
    visibility: hidden;
    opacity: 0;
    display: inline;
    white-space: nowrap;
    text-align: inherit;
}

.question-char.animate {
    visibility: visible;
    animation: fadeInChar 0.3s ease-out forwards;
}

@keyframes fadeInChar {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Loading Animation */
.loading-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.loading-dot {
    width: 8px;
    height: 8px;
    background: var(--Rosa, #B40054);
    border-radius: 50%;
    animation: loadingPulse 1.4s ease-in-out infinite both;
}

.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }
.loading-dot:nth-child(3) { animation-delay: 0s; }

@keyframes loadingPulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Answer Options */
.answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.answer-option {
    background: #fff;
    border: 2px solid var(--Cinza-escuro, #A2A4A3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
    animation: answerAppear 0.6s ease-out forwards;
}

.answer-option.clicked:not(.suspense) {
    opacity: 1 !important;
    transform: scale(1) !important;
}


.answer-option:nth-child(1) { animation-delay: 0s; }
.answer-option:nth-child(2) { animation-delay: 0.5s; }
.answer-option:nth-child(3) { animation-delay: 1s; }
.answer-option:nth-child(4) { animation-delay: 1.5s; }

@keyframes answerAppear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.answer-option:hover {
    border-color: var(--Rosa, #B40054);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(180, 0, 84, 0.15);
}

.answer-option.selected {
    background: #fff;
    transform: scale(1.02);
}

.answer-option.suspense {
    animation: suspenseHeartbeat 2s ease-in-out infinite !important;
    border-color: var(--Rosa, #B40054) !important;
    background: linear-gradient(135deg, #fff1f8 0%, #ffd4e8 100%) !important;
    box-shadow: 0 6px 20px rgba(180, 0, 84, 0.3) !important;
}

.answer-option.unselected {
    opacity: 0.4 !important;
    pointer-events: none;
    border-color: var(--Cinza-escuro, #A2A4A3);
}

.answer-option.unselected .answer-text {
    color: var(--Cinza-escuro, #A2A4A3);
}

.answer-option.unselected .score-display {
    opacity: 1;
    transform: scale(1);
}

.answer-option.unselected .score-points {
    color: var(--Cinza-escuro, #A2A4A3);
}

.answer-option.unselected .score-units {
    color: var(--Cinza-escuro, #A2A4A3);
}

.answer-option.unselected .score-display {
    --c1: var(--Cinza-escuro, #A2A4A3);
    --c2: var(--Cinza-escuro, #A2A4A3);
}

@keyframes suspenseHeartbeat {
    0% {
        opacity: 1;
        transform: scale(1.02);
    }
    25% {
        opacity: 0.9;
        transform: scale(1.04);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.03);
    }
    75% {
        opacity: 0.9;
        transform: scale(1.04);
    }
    100% {
        opacity: 1;
        transform: scale(1.02);
    }
}

.answer-text {
    font-size: 2.1rem;
    line-height: 1.5;
    color: var(--Roxo, #460032);
    font-weight: 400;
    margin: 20px 50px;
    text-align: left;
}

.score-display {
    width: 220px;
    height: 220px;
    min-width: 220px;
    min-height: 220px;
    display: grid;
    place-items: center;
    gap: 0.2rem;
    font-family: system-ui, sans-serif;
    background: #fff;
    position: relative;
    isolation: isolate;
  
    --b: 15px;         /* frame thickness */
    --c1: #ff4d00;     /* orange (top/left) */
    --c2: #ffb400;     /* yellow (bottom/right) */
    --angle: 30deg;    /* split angle (slightly shifted right) */
    
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
  }
  
  /* frame only */
  .score-display::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--b);
  
    /* two solid colors split by the diagonal, with shifted rotation center */
    background: conic-gradient(
      from var(--angle) at 58% 50%,   /* shifted 8% right from center */
      var(--c1) 0 50%,
      var(--c2) 0 100%
    ) border-box;
  
    /* punch the center out cleanly */
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) padding-box;
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) padding-box;
    mask-composite: exclude;
  }
  
  /* text */
  .score-points {
    font-size: 72px;
    font-weight: 800;
    color: #b10054;
    line-height: 1;
  }
  
  .score-units {
    font-size: 26px;
    font-weight: 700;
    color: #3a0033;
    margin-top: -6px;
  }


.score-display.show {
    opacity: 1;
    transform: scale(1);
    animation: punchIn 0.5s ease-out;
}

.score-display.show-unselected {
    opacity: 1;
    transform: scale(1);
    /* No animation for unselected answers */
}

@keyframes punchIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Quiz Footer */
.quiz-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    margin-top: auto;
    border-top: 1px solid #eee;
}

.progress-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--Roxo, #460032);
}

.question-counter {
    font-size: 1rem;
    color: var(--Cinza-escuro, #A2A4A3);
}

.total-score {
    font-size: 1rem;
    color: var(--Rosa, #B40054);
    font-weight: 600;
    margin-top: 0.25rem;
}

.next-button {
    background: var(--Rosa, #B40054);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.next-button.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.next-button:hover {
    background: #9a0047;
    transform: translateY(-2px);
}

/* Mobile responsiveness for quiz */
@media (max-width: 768px) {
    .quiz-container {
        margin: 20px;
        border-radius: 4px;
    }
    
    .quiz-content {
        padding: 1rem;
    }
    
    .answers-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .question-text {
        font-size: 1.4rem;
    }
    
    .quiz-footer {
        position: static;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        margin-top: 2rem;
    }
    
    .progress-info {
        text-align: center;
    }
}

/* Quiz Results Page Styles */
.results-container {
    display: flex;
    flex-direction: column;
    background: white;
    min-height: 85vh;
    min-width: 95vw;
    height: auto;
    margin: 70px;
}

.results-header {
    display: flex;
    background: white;
    padding: 2rem;
}

.results-content {
    display: flex;
    background: white;
    flex: 1;
    position: relative;
    align-items: flex-start;
}

.results-title-column {
    flex: 0 0 30%;
    background: white;
    padding: 2rem 30px 2rem 80px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.results-image-column {
    flex: 0 0 20%;
    background: white;
    padding: 2rem 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.results-info-column {
    flex: 1;
    background: white;
    padding: 2rem 80px 2rem 2rem;
    display: flex;
    align-items: flex-start;
}

.results-section {
    width: 100%;
}


.results-container .team-info {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
}

/* Quiz Results Team Name - Different from existing team-name */
.results-container .team-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--Roxo, #460032);
    margin-bottom: 0.5rem;
}

.results-container .team-subtitle {
    font-size: 1rem;
    color: var(--Cinza-escuro, #A2A4A3);
}

.results-message {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--Roxo, #460032);
    margin-bottom: 2rem;
}

.results-message p {
    margin-bottom: 1rem;
}

.results-message p:last-child {
    margin-bottom: 0;
}

.results-container .action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.results-container .action-btn {
    background: var(--Rosa, #B40054);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.results-container .action-btn:hover {
    background: #9a0047;
    transform: translateY(-2px);
}

.results-container .action-btn.secondary {
    background: var(--Cinza-escuro, #A2A4A3);
}

.results-container .action-btn.secondary:hover {
    background: #8a9a9b;
}

/* Quiz Results Mobile Responsiveness */
@media (max-width: 768px) {
    .results-container {
        margin: 20px;
        border-radius: 4px;
    }
    
    .results-content {
        flex-direction: column;
    }
    
    .results-title-column,
    .results-image-column,
    .results-info-column {
        flex: none;
        padding: 1rem;
    }
    
    .results-image-column {
        order: -1; /* Move image to top on mobile */
        text-align: center;
    }
    
    .results-container .score-number {
        font-size: 4rem;
    }
    
    .results-container .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .results-container .action-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Make text and image bigger on quiz-results page only */
.results-container .section-main {
    font-size: 5.25rem; /* 3.5rem * 1.5 */
}

.results-container .section-prefix {
    font-size: 1.5rem; /* 1rem * 1.5 */
}

.results-container .results-message p {
    font-size: 1.5rem; /* 1rem * 1.5 */
    line-height: 1.6;
}

.results-container .results-message strong {
    font-size: 1.5rem; /* Inherits from parent but ensuring consistency */
}

.results-container .section-title img {
    width: 120px !important; /* 80px * 1.5 */
    height: 120px !important; /* 80px * 1.5 */
}

.results-container .results-message span[style*="font-size: 1.5rem"] {
    font-size: 2.25rem !important; /* 1.5rem * 1.5 */
}