:root {
    /* NOVA Brand Colors - Based on actual logo */
    --nova-primary-blue: #1e4a7f;
    --nova-dark-blue: #152a4a;
    --nova-light-blue: #e6f0ff;
    --nova-orange: #ff990c;
    /* --nova-orange: #d4802e; */
    --nova-orange-light: #FFBE25;
    --nova-light-orange: #fff3e6;
    /* --nova-orange-light: #f5d5a8; */
    --nova-text-dark: #2c3e50;
    --nova-text-light: #ffffff;
    --nova-gray-light: #f8f9fa;
    --nova-gray-medium: #e9ecef;
    --nova-gray-border: #dee2e6;
    --nova-shadow: rgba(0, 0, 0, 0.1);
    --nova-success: #28a745;
    --nova-danger: #dc3545;
    
    /* Legacy colors (kept for compatibility) */
    --dotank-game-color-primary: var(--nova-primary-blue);
    --dotank-game-color-takeda-red: var(--nova-danger);
    --dotank-game-color-takeda-deep-red: #8A1415;
    --dotank-game-color-takeda-cream: var(--nova-light-orange);
    --dotank-game-color-takeda-cream-alpha: rgba(255, 243, 230, 0.8);
    --dotank-game-color-takeda-text: var(--nova-text-dark);
    --dotank-game-color-takeda-highlight: rgba(136, 173, 102, 0.2);
    --dotank-game-color-mars-teal: #038f99;
    --dotank-game-color-mars-blue: var(--nova-primary-blue);

    scroll-behavior: smooth;
}

.quiz-game-section {
    min-height: 520px;
    padding: 30px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, var(--nova-light-blue) 0%, var(--nova-gray-light) 30%, var(--nova-light-orange) 100%);
    box-shadow: 0 4px 6px var(--nova-shadow);
    position: relative;
    overflow: hidden;
}

.quiz-game-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, var(--nova-orange-light) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, var(--nova-light-blue) 0%, transparent 40%);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.quiz-game-section > * {
    position: relative;
    z-index: 1;
}

.quiz-questions-wrapper,
.quiz-correct-answer-wrapper,
.quiz-wrong-answer-wrapper {
    padding: 15px;
}

.quiz-correct-answer-wrapper,
.quiz-wrong-answer-wrapper {
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* Timer/Stopwatch Panel - Simple Orange Gradient */
.codes-quiz-game-panel-row {
    background: linear-gradient(135deg, #e67e22 0%, var(--nova-orange) 100%);
    color: var(--nova-text-light);
    padding: 20px 30px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(212, 128, 46, 0.3);
}

.quiz-game-panel-stopwatch {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quiz-game-panel-question {
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-panel-stopwatch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.game-panel-stopwatch-icon::before {
    content: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='15' fill='white' fill-opacity='0.2' stroke='white' stroke-width='2'/%3E%3Cpath d='M16 8V16L20 20' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='16' r='2' fill='white'/%3E%3C/svg%3E%0A");
    display: block;
    width: 32px;
    height: 32px;
}

.quiz-question-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quiz-question-indicator::before {
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='white' fill-opacity='0.2' stroke='white' stroke-width='2'/%3E%3Cpath d='M12 16v-4M12 8h.01' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.quiz-stopwatch-time {
    font-size: 28px;
    font-weight: 600;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    line-height: 1;
}

.quiz-question-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

/* Topic indicator styles */
.question-topic {
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
    display: inline-block;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Default topic style */
.question-topic {
    background-color: var(--nova-light-orange);
    color: var(--nova-orange);
    box-shadow: 0 2px 4px rgba(255, 127, 0, 0.2);
}

/* Stage Gate Overview - Blue theme */
.question-topic[data-topic="stage-gate-overview"] {
    background-color: #e6f0ff;
    color: #1e4a7f;
    box-shadow: 0 2px 4px rgba(30, 74, 127, 0.2);
}

/* Why we have a single process - Green theme */
.question-topic[data-topic="why-we-have-a-single-process"] {
    background-color: #e8f5e9;
    color: #2e7d32;
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
}

/* Governance Structure - Purple theme */
.question-topic[data-topic="governance-structure"] {
    background-color: #f3e5f5;
    color: #6a1b9a;
    box-shadow: 0 2px 4px rgba(106, 27, 154, 0.2);
}

/* Stage-gate Detailed View - Teal theme */
.question-topic[data-topic="stage-gate-detailed-view"] {
    background-color: #e0f2f1;
    color: #00695c;
    box-shadow: 0 2px 4px rgba(0, 105, 92, 0.2);
}

/* FAQ - Orange theme (default) */
.question-topic[data-topic="faq"] {
    background-color: var(--nova-light-orange);
    color: var(--nova-orange);
    box-shadow: 0 2px 4px rgba(255, 127, 0, 0.2);
}

/* Answer wrapper styles - Perfect vertical centering */
.answer-wrapper {
    background-color: white;
    border: 2px solid var(--nova-gray-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px var(--nova-shadow);
    min-height: 80px;
}

.answer-text {
    margin-left: 1rem;
    line-height: 1.4! important;
}

.answer-wrapper:hover {
    border-color: var(--nova-primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--nova-shadow);
}

.highlight-answer {
    background-color: var(--nova-light-blue);
    border-color: var(--nova-primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 74, 127, 0.3);
}

/* SVG placeholder styles - Fixed centering */
.answer-svg-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}

.answer-wrapper:hover .answer-svg-placeholder {
    transform: scale(1.1);
}

.highlight-answer .answer-svg-placeholder circle {
    fill: var(--nova-orange) !important;
    stroke: var(--nova-orange) !important;
}

.highlight-answer .answer-svg-placeholder text {
    fill: white !important;
    font-weight: bold;
}

/* Question styles */
.quiz-questions-wrapper h2 {
    color: var(--nova-text-dark);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 40px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Question icon styles */
.question-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    vertical-align: middle;
}

.quiz-question-text {
    text-align: left;
    color: var(--nova-text-dark);
    letter-spacing: 0.5px;
    font-size: 20px !important;
}

.quiz-question-text-winner {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: var(--nova-orange);
}

.answer-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--nova-text-dark);
    line-height: 1.4;
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.codes-quiz-headings {
    color: var(--nova-primary-blue);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.codes-quiz-game-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
}

.answer-wrapper>img {
    display: inline-block;
    height: 75px !important;
    width: auto;
    margin-right: 15px;
}


/* Button styles */
.quiz-codes-answer-btn,
.quiz-codes-next-question-btn,
.quiz-codes-finish-btn,
.start-codes-quiz,
.btn-codes-restart {
    background-color: var(--nova-primary-blue);
    color: white;
    border: none;
    padding: 10px 24px 10px 24px !important;
    border-radius: 100px !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px var(--nova-shadow);
}

.quiz-codes-answer-btn:hover,
.quiz-codes-next-question-btn:hover,
.quiz-codes-finish-btn:hover,
.start-codes-quiz:hover,
.btn-codes-restart:hover {
    background-color: var(--nova-dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px var(--nova-shadow);
}

.answer-btn-disabled {
    pointer-events: none;
    opacity: 0.5;
    background-color: var(--nova-gray-medium);
}

.btn-wrapper {
    text-align: center;
    margin-top: 30px;
}

.deep-red {
    color: var(--nova-danger);
}

.quiz-start-text-wrapper p {
    font-size: 1em;
    text-align: center;
}

.quiz-questions-wrapper,
.quiz-complete,
.quiz-correct-answer-wrapper,
.quiz-wrong-answer-wrapper {
    display: none;
    flex-direction: column;
    box-sizing: border-box;
}

.quiz-codes-finish-btn {
    display: none;
}

/* Correct answer screen styling */
.quiz-correct-answer-wrapper h2 {
    color: var(--nova-success);
    font-size: 32px !important;
    font-weight: 600;
    margin-bottom: 25px;
}

.quiz-correct-answer-wrapper lottie-player {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 30px;
    display: block;
}


/* Already defined above in answer wrapper styles */

.highlight-good-answer {
    background-color: var(--dotank-game-color-takeda-highlight);
    border-radius: 15px;
    -webkit-box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
    -moz-box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
    box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
}

li.highlight-good-answer::before {
    content: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='circle-check-regular 1' clip-path='url(%23clip0_1009_3411)'%3E%3Cpath id='Vector' d='M21.4277 29.8652C20.4697 30.8232 18.9053 30.8232 17.9473 29.8652L12.3223 24.2402C11.3643 23.2822 11.3643 21.7178 12.3223 20.7598C13.2803 19.8018 14.8447 19.8018 15.8027 20.7598L19.6875 24.6445L29.1973 15.1348C30.1553 14.1768 31.7197 14.1768 32.6777 15.1348C33.6357 16.0928 33.6357 17.6572 32.6777 18.6152L21.4277 29.8652ZM45 22.5C45 34.9277 34.9277 45 22.5 45C10.0723 45 0 34.9277 0 22.5C0 10.0723 10.0723 0 22.5 0C34.9277 0 45 10.0723 45 22.5ZM22.5 4.21875C12.4014 4.21875 4.21875 12.4014 4.21875 22.5C4.21875 32.5986 12.4014 40.7812 22.5 40.7812C32.5986 40.7812 40.7812 32.5986 40.7812 22.5C40.7812 12.4014 32.5986 4.21875 22.5 4.21875Z' fill='%23688940'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1009_3411'%3E%3Crect width='45' height='45' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    margin-right: 10px;
}

/* Quiz wrapper styles */
.quiz-start-wrapper {
    margin: auto;
    flex-direction: column;
}

.quiz-start-wrapper h1,
.quiz-complete h2 {
    text-align: center;
    color: var(--nova-primary-blue);
    margin-bottom: 20px;
}

.start-btn-quiz-wrapper {
    background-color: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 6px var(--nova-shadow);
    text-align: center;
}

.quiz-questions-wrapper {
    background-color: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 6px var(--nova-shadow);
}

.correct-answers-heading {
    margin-bottom: 20px;
    margin-top: 20px;
}

.quiz-finish-message {
    color: var(--nova-text-dark);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
}

.quiz-start-text-wrapper,
.quiz-complete-text-wrapper {
    margin: auto;
}

/* Quiz completion styles */
.quiz-winner-wrapper,
.quiz-loser-wrapper,
.quiz-spinner-wrapper {
    display: none;
    padding: 40px 30px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0 8px 16px var(--nova-shadow);
    text-align: center;
    min-height: 500px;
}

/* Thank you text styling */
.quiz-loser-wrapper h2,
.quiz-winner-wrapper h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

.quiz-loser-wrapper h2 {
    color: var(--nova-primary-blue);
}

/* Score output styling */
.score-output {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.4;
}

.quiz-loser-wrapper .score-output {
    color: var(--nova-text-dark);
    background-color: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: inline-block;
}

.score-output strong {
    color: var(--nova-orange);
    font-weight: 700;
}

/* Lottie animations in completion screens */
.quiz-loser-wrapper lottie-player,
.quiz-winner-wrapper lottie-player {
    width: 400px !important;
    height: 400px !important;
    margin: 0 auto 20px;
    display: block;
}

/* Time output styling */
.time-output {
    font-size: 20px;
    font-weight: 600;
    color: var(--nova-orange);
    margin-top: 20px;
}

.quiz-winner-wrapper {
    background: linear-gradient(135deg, var(--nova-light-orange) 0%, var(--nova-orange) 100%);
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.quiz-loser-wrapper {
    background: linear-gradient(135deg, #ffffff 0%, var(--nova-light-blue) 100%);
    color: var(--nova-text-dark);
    border: 2px solid var(--nova-primary-blue);
}

.quiz-correct-answer-wrapper,
.quiz-wrong-answer-wrapper {
    background-color: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 6px var(--nova-shadow);
    text-align: center;
}

/* Wrong answer specific styling */
.quiz-wrong-answer {
    color: var(--nova-danger);
    font-size: 36px !important;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: none;
}

/* Lottie animation container */
.quiz-wrong-answer-wrapper lottie-player {
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 30px;
    display: block;
}

/* Correct answer heading */
.quiz-wrong-answer-wrapper .correct-answers-heading {
    font-size: 16px !important;
    color: var(--nova-text-dark);
    font-weight: 500;
    margin-bottom: 15px;
    opacity: 0.8;
}

/* Right answer output */
.right-answer-output {
    font-size: 18px !important;
    font-weight: 600;
    color: var(--nova-success);
    margin: 20px auto;
    padding: 15px 25px;
    background-color: rgba(40, 167, 69, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(40, 167, 69, 0.3);
    max-width: 600px;
    line-height: 1.5;
}

.quiz-winner-text {
    margin-top: 50px;
}

.start-btn-quiz-wrapper,
.submit-answer-wrapper,
.restart-quiz-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn-answer {
    padding: 3px 10px;
}

.start-codes-quiz,
.quiz-codes-answer-btn,
.btn-codes-restart,
.quiz-codes-next-question-btn,
.quiz-codes-finish-btn {
    color: white;
    padding: 10px 25px;
    cursor: pointer;
    margin-top: 50px;
    border-radius: 15px;
    font-weight: 400;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #FFBFE2;
}

.start-codes-quiz:hover,
.quiz-codes-answer-btn:hover,
.btn-codes-restart:hover,
.quiz-codes-next-question-btn:hover,
.quiz-codes-finish-btn:hover {
    color: #E6E6F6;
    background-color: #000072;
}


.submit-wrapper {
    background-color: aqua;
}

.quiz-complete-text-wrapper p {
    font-size: 1.4em;
    line-height: 1.8;
}

.quiz-complete {
    align-items: center;
}

.codes-quiz-game-panel-row {
    display: none;
    background-color: #FFBFE2;
    border-radius: 20px;
    justify-content: space-around;
}

.codes-quiz-panel-text {
    margin: 0;
}

.game-panel-play-icon {
    font-size: 3.5rem;
    color: var(--dotank-game-color-takeda-red);
    transition: all 0.3s ease-out;
}

.game-panel-play-icon:hover {
    transform: scale(1.2);
}

.game-panel-stopwatch-icon,
.game-panel-question-icon {
    font-size: 2.5rem !important;
    color: #2C2C49;
}

.quiz-game-panel-stopwatch,
.quiz-game-panel-question {
    font-size: 1.3rem;
    color: #2C2C49;
    margin-left: 30px;
    font-weight: bold;
}

@media only screen and (min-width: 370px) and (max-width: 600px) {

    /* ruleset for 370px - 600px */
    .game-panel-play-icon,
    .game-panel-player-icon,
    .game-panel-timer-icon,
    .game-panel-turns-icon {
        font-size: 1.6rem !important;
    }

    .game-panel-timer,
    .game-panel-score {
        font-size: 2rem;
        margin-left: 15px;
    }

    .game-panel-player,
    .game-panel-player-name {
        font-size: 1.2rem;
    }

    .game-board-wrapper {
        width: 400px;
        height: 420px;
    }

    .scoreboard-table th {
        font-size: 1rem;
        font-weight: 600;
    }

    .scoreboard-table th {
        display: none;
    }

    .scoreboard-table tr {
        display: flex;
        flex-direction: column;
    }

    .scoreboard-table td:first-of-type {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    .scoreboard-table td:nth-child(2),
    .scoreboard-table td:nth-child(3) {
        border-bottom: none;
    }
}

.quiz-complete-text-wrapper {
    text-align: center;
}

.quiz-play-again-btn {
    margin-top: 30px;
}

/* Quiz Leaderboard Styles*/

.quiz-leaderboard-wrapper {
    /* From https://css.glass */
    background: rgba(47, 110, 200, 0.46);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.4px);
    -webkit-backdrop-filter: blur(10.4px);
    border: 1px solid rgba(47, 110, 200, 0.31);
    padding: 30px;
}

.quiz-leaderboard-table th {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dotank-game-color-secondary);
}

.quiz-leaderboard-table {
    border: none;
    color: var(--dotank-game-color-takeda-cream);
    font-weight: 600;
    font-size: 1rem;
}


.quiz-leaderboard-warning {
    font-size: 2rem;
    margin-top: 20px;
    text-align: center;
    color: var(--dotank-game-color-takeda-cream);
}