* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #AB05B6 0%, #6A4CFF 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
    overscroll-behavior: none; /* Prevent pull-to-refresh and overscroll effects */
}

#footer-container {
    width: 100%;
    margin-top: auto;
}

.page {
    display: none;
    width: 100%;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 10px 0;
    touch-action: pan-y; /* Only allow vertical scrolling on the page */
}

.page.active {
    display: flex;
}

.container {
    text-align: center;
    padding: 20px;
    max-width: 600px;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Title - matching /out/index.html exactly */
.title {
    color: white;
    font-size: clamp(1.2rem, 3vw, 1.68rem);
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 1.2;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Mixed font styles for title */
.title-trebuchet {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
}

.title-georgia {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
}

/* ===== LANDING PAGE STYLES ===== */

/* Quiz Intro Text */
.quiz-intro-text {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    font-size: clamp(1.3rem, 2vw, 3rem);  /* Match mobile */
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.4;
    width: 85%;  /* Match mobile */
    margin-top: 15%;
    margin-bottom: clamp(2.5rem, 3.5vh, 4rem);  /* Add from mobile */
}

/* Landing Buttons Container */
.landing-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: clamp(3rem, 5vh, 4rem);
    width: 100%;
}

/* Landing Buttons - EXACT copy of /out/ .btn class structure */
.btn-landing {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    text-transform: lowercase;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    padding: clamp(4.32px, 0.648vh, 6.48px) clamp(25px, 4vw, 80px);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.825rem, 2.25vw, 1.05rem);
    font-weight: 500;
    letter-spacing: 4px;
    min-width: clamp(100px, 20vw, 150px); /* Ensure both buttons have same width */
}

/* Start Button - White filled (like .btn-primary) */
.btn-landing-start {
    background: white;
    color: #773ef0;
    border-color: white;
}

.btn-landing-start:hover {
    background: #f0f0f0;
    color: #773ef0;
}

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

/* Exit Button - Transparent (like base .btn) */
.btn-landing-exit {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-landing-exit:hover {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.8);
    color: white;
}

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

/* Category Explorer Container */
.category-explorer {
    width: 100%;
    margin-top: clamp(2rem, 4vh, 3rem);
}

/* Explorer Navigation Row */
.explorer-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 3vw, 30px);
    margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

/* Explorer Title */
.explorer-title {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    font-size: clamp(0.75rem, 2vw, 1rem);
    font-weight: 200;
    letter-spacing: 3px;
    text-transform: lowercase;
}

/* Carousel Navigation Buttons */
.carousel-nav-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 1);
    font-size: clamp(0.7rem, 3vw, 1.1rem);
    cursor: pointer;
    padding: 1px 10px;
    transition: all 0.3s ease;
    line-height: 1;
}

.carousel-nav-btn:hover {
    color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

.carousel-nav-btn:active {
    transform: scale(0.95);
}

/* Carousel Viewport - Overflow hidden container */
.carousel-viewport {
    width: 100%;
    overflow: visible;
    position: relative;
}

/* Carousel Track - Horizontal scrolling container */
.category-carousel-track {
    display: flex;
    gap: clamp(20px, 4vw, 40px);
    transition: transform 0.8s ease-in-out;
    will-change: transform;
    touch-action: pan-y; /* Allow vertical scrolling, but prevent horizontal default behavior */
}

/* Category Item - Individual slide */
.category-item {
    flex: 0 0 auto;
    width: clamp(176px, 44vw, 252px);  /* 40% total reduction */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Category Circle Container */
.category-circle {
    width: clamp(176px, 44vw, 252px);  /* 40% total reduction */
    height: clamp(176px, 44vw, 252px);  /* 40% total reduction */
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 32px);  /* Adjusted padding */
    gap: clamp(7px, 1.4vh, 11px);  /* Adjusted gap */
    text-align: center;
    cursor: grab;
    user-select: none; /* Prevent text selection during drag */
}

.category-circle:active {
    cursor: grabbing;
}

/* Category Title inside Circle */
.category-title {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    color: rgba(255, 255, 255, 1);
    font-size: clamp(0.80rem, 2.2vw, 1.1rem);  /* Slightly reduced */
    font-weight: 100;
    letter-spacing: 3.5px;
    line-height: 1.3;  /* Adjusted to 1.3 */
    display: block;
    margin-top: 3%;  /* Added to move title down slightly closer to description */
    margin-bottom: 1%;  /* Further reduced to bring description even closer */
    width: 80%;
}

/* Category Description inside Circle */
.category-description {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    font-style: regular;
    color: rgba(255, 255, 255, 1);
    font-size: clamp(0.66rem, 1.65vw, 0.83rem);  /* Slightly reduced */
    font-weight: 200;
    letter-spacing: 0.5px;
    line-height: 1.3;  /* Tighter */
    width: 88%;  /* Use more available space */
    display: block;
}

/* ===== END LANDING PAGE STYLES ===== */

/* Quiz Counter - matching step-counter from /out, with 4px top margin */
.quiz-counter {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    font-size: clamp(0.88rem, 2.4vw, 1.12rem);
    font-weight: 400;
    letter-spacing: 4px;
    margin-top: 4px;
    margin-bottom: clamp(0.8rem, 1.5vh, 1.2rem);
}

/* Topic Display - no margin left from counter */
.topic-display {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    color: white;
    text-align: center;
    font-size: clamp(0.88rem, 2.4vw, 1.12rem);
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: clamp(2rem, 3vh, 4rem);
}

/* Question Text - Fixed height at 20% of screen to prevent button bouncing */
.question-text {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    color: rgba(255, 255, 255, 1);
    max-width: 500px;
    line-height: 1.25;
    text-align: center;
    padding: 0 15px;
    font-size: clamp(1.4rem, 1.1vw, 2.12rem);
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: clamp(2rem, 2.5vh, 4rem);

    /* Fixed height - 20% of screen to prevent layout shift */
    min-height: 20vh;
    max-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Options Container */
.options-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: clamp(2rem, 3vh, 4rem);
    width: 100%;
}

/* Option Buttons */
.option-btn {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    border: 1px solid rgba(255, 255, 255, 1);  /* Perfect white border */
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: rgba(255, 255, 255, 1);  /* Perfect white text */
    box-shadow: none;
    padding: clamp(8px, 1.2vh, 12px) clamp(30px, 6vw, 60px);
    width: clamp(200px, 80%, 600px);
    font-size: clamp(0.866rem, 2.363vw, 1.103rem);  /* +5%: 0.825→0.866, 2.25→2.363, 1.05→1.103 */
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;  /* Center text */
    line-height: 1.4;
    min-height: 55px;  /* +10%: 50px → 55px */
}

.option-btn:hover {
    background: transparent;  /* Same as default */
    border-color: rgba(255, 255, 255, 1);  /* Same as default */
    color: rgba(255, 255, 255, 1);  /* Same as default */
}

.option-btn:disabled {
    cursor: not-allowed;
    /* No opacity change - stays at 1 */
}

/* Correct answer (blue) - solid, no transparency */
.option-btn.correct {
    background: #3097b4;
    border-color: #3097b4;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

/* Incorrect answer (pink) - solid, no transparency */
.option-btn.incorrect {
    background: #ff006a;
    border-color: #ff006a;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

/* Show correct answer with white bg when user fails - solid, no transparency */
.option-btn.show-correct {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

/* Feedback Button - Answer feedback display */
.btn-feedback {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    text-transform: lowercase;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    padding: clamp(4.32px, 0.648vh, 6.48px) clamp(40px, 8vw, 80px);
    font-size: clamp(0.825rem, 2.25vw, 1.05rem);
    font-weight: 500;
    letter-spacing: 2px;
    background: transparent;
    color: rgba(255, 255, 255, 1);
    margin-top: 5px;
    white-space: nowrap;  /* Keep text on one line */
    text-decoration: none;  /* Remove underline from link */
}

/* Exit Button - Image-based, centered below options, 15% smaller */
.exit-btn-image {
    width: 68px;  /* 80px - 15% = 68px */
    height: 68px;
    border: none;
    background: url('imgs/btn_exit_quiz.png') center/contain no-repeat;
    cursor: pointer;
    padding: 0;
    margin-top: clamp(1rem, 2vh, 2rem);
    opacity: 1;  /* Always full opacity */
}

.exit-btn-image:hover {
    opacity: 1;  /* Stay full opacity on hover */
}

.exit-btn-image:active {
    transform: scale(0.95);
}

/* Results Page Styling */

/* Results Spacer - matches toggle-controls-container spacing from /out/ */
.results-spacer {
    margin-top: 0%;
    margin-bottom: clamp(0.1rem, 0.5vh, 1rem);
}

/* Timer Circle Container - EXACT COPY from /out/styles.css */
.timer-circle-container {
    width: clamp(500px, 140vw, 500px);
    height: clamp(500px, 140vw, 500px);
    border: 1px solid white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
    padding: 20px 40px 60px 40px;  /* Asymmetric padding to shift content upward */
    gap: 4px;
    position: relative;
}

/* Score Image Container - 30% smaller than exercise image */
.score-image-container {
    width: 31.5%;  /* 45% - 30% = 31.5% */
    max-width: 420px;  /* 600px - 30% = 420px */
    margin: 0 auto 4px;
}

.score-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Final Score Display - Based on timer-display but DOUBLED (x2) */
.final-score {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    color: white;
    text-align: center;
    font-size: clamp(6rem, 6vw, 6rem);
    font-weight: 400;
    letter-spacing: 8px;
    margin-bottom: 0;
}

/* Score Feedback Title - Based on exercise-title pattern */
.score-feedback-title {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
    color: white;
    text-align: center;
    font-size: clamp(2.0rem, 2.5vw, 5rem);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: clamp(0.8rem, 1.5vh, 1.2rem);
}

/* Score Feedback Text - 70% width, spacing reduced by 20% */
.score-feedback-text {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    text-transform: lowercase;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: clamp(0.896rem, 1.68vh, 1.344rem);  /* 20% reduction */
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* Game Feedback Text - Same style as score feedback text */
.game-feedback-text {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    text-transform: lowercase;
    font-size: clamp(0.54rem, 0.6vw, 1.2rem);  /* -40% reduction */
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: clamp(0.896rem, 1.68vh, 1.344rem);  /* 20% reduction */
    margin-top: 10%;
    width: auto;  /* Match button auto width */
    margin-left: auto;
    margin-right: auto;
}

/* Container for Exit and Play Again buttons - EXACT COPY from /out/styles.css */
.results-controls-group {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Exit and Play Again buttons - EXACT COPY from .btn-pause-control in /out/styles.css */
.btn-results-control {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;  /* Hide text */
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: lowercase !important;
    border: none !important;
    box-shadow: none !important;
}

/* Exit button image - EXACT COPY from #exit-paused-btn */
#exit-to-main-btn {
    background: url('../out/btns/btn_exit_when_paused.png') center/contain no-repeat !important;
}

/* Play Again button image - EXACT COPY from #resume-btn */
#done-btn {
    background: url('../out/btns/btn_resume_after_pause.png') center/contain no-repeat !important;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    /* Landing Page - Mobile */
    .quiz-intro-text {
        width: 67%;
        font-size: clamp(1.3rem, 4vw, 3rem);
        margin-bottom: clamp(2.5rem, 3.5vh, 4rem);
    }

    .landing-buttons-container {
        gap: 12px;
        margin-bottom: clamp(2rem, 4vh, 3rem);
    }

    .btn-landing {
        font-size: clamp(0.9rem, 3vw, 1.1rem);

    }

    /* Carousel - Mobile */
    .category-item {
        width: clamp(158px, 50vw, 221px);  /* 40% total reduction */
    }

    .category-circle {
        width: clamp(158px, 50vw, 221px);  /* 40% total reduction */
        height: clamp(158px, 50vw, 221px);  /* 40% total reduction */
        padding: clamp(16px, 3.4vw, 27px);  /* Adjusted padding */
    }

    .category-title {
        font-size: clamp(0.8rem, 2.9vw, 1.05rem);  /* Slightly reduced */
    }

    .category-description {
        font-size: clamp(0.7rem, 2vw, 0.9rem);  /* Slightly reduced */
        width: 92%;  /* Use more space */
    }

    /* Question text - EXACT COPY from landing page .description mobile */
    .question-text {
        margin-bottom: 2rem;
        font-size: clamp(1.4rem, 1.1vw, 2.12rem);
        font-weight: 500;
        letter-spacing: 0;
    }

    .option-btn {
        width: 90%;
        min-height: 66px;  /* +10%: 60px → 66px */
    }

    /* Results - Mobile adjustments with 30% image reduction */
    .score-image-container {
        max-width: 35%;  /* 50% - 30% = 35% */
    }

    .score-feedback-text {
        width: 85%;  /* Wider on mobile for better readability */
    }

    /* Game Feedback Text - Mobile adjustments */
    .game-feedback-text {
        width: clamp(80px, 48%, 480px);  /* Match button width on mobile */
        font-size: clamp(0.54rem, 1.5vw, 0.72rem);  /* -40% reduction */
        line-height: 1.7;  /* Better line spacing */
        margin-top: 16%;
        margin-bottom: clamp(0.8rem, 1.5vh, 1.2rem);
    }

    /* Feedback Button - Mobile adjustments */
    .btn-feedback {
        width: clamp(80px, 48%, 480px); /* Responsive width - 20% reduction */
        padding: clamp(8px, 1.2vh, 12px) clamp(30px, 6vw, 60px);
        font-size: clamp(0.9rem, 2.5vw, 1.1rem);
        letter-spacing: 1.5px;
        margin-top: 0px;
        white-space: nowrap;  /* Keep text on one line */
        min-height: 30px;  /* Minimum touch target size */
        max-height: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Very short landscape screens - EXACT COPY from /out/ */
@media (max-height: 400px) and (orientation: landscape) {
    body {
        align-items: flex-start;
    }

    .page {
        min-height: 100vh;
        max-height: 100vh;
        padding: 0;
        align-items: flex-start;
    }

    .container {
        padding: 2px 10px;
        max-height: 100vh;
        overflow-y: auto;
        justify-content: flex-start;
        gap: 2px;
        max-width: 100%;
    }

    .title {
        margin-bottom: 2px;
        font-size: clamp(0.384rem, 2.5vh, 0.576rem);
    }

    /* Landing Page - Landscape */
    .quiz-intro-text {
        width: 80%;
        font-size: clamp(0.65rem, 2.2vh, 0.85rem);
        margin-bottom: 1rem;
        line-height: 1.3;
    }

    .landing-buttons-container {
        gap: 8px;
        margin-bottom: 1.5rem;
        flex-direction: row;
    }

    .btn-landing {
        padding: 3.5px 25px;  /* Height reduced by 30% */
        font-size: clamp(0.65rem, 1.8vh, 0.85rem);
    }

    .explorer-nav-row {
        gap: 15px;
        margin-bottom: 1rem;
    }

    .explorer-title {
        font-size: clamp(0.6rem, 1.6vh, 0.75rem);
    }

    .carousel-nav-btn {
        font-size: clamp(1rem, 2.5vh, 1.4rem);
    }

    .category-item {
        width: clamp(113px, 25vw, 158px);  /* 40% total reduction */
    }

    .category-circle {
        width: clamp(113px, 25vw, 158px);  /* 40% total reduction */
        height: clamp(113px, 25vw, 158px);  /* 40% total reduction */
        padding: clamp(11px, 2vw, 16px);  /* Adjusted padding */
        gap: 5px;  /* Slightly reduced */
    }

    .category-title {
        font-size: clamp(0.6rem, 1.65vh, 0.8rem);  /* Slightly reduced */
    }

    .category-description {
        font-size: clamp(0.48rem, 1.2vh, 0.6rem);  /* Slightly reduced */
        line-height: 1.22;  /* Tighter for smaller circles */
    }

    /* Question text - landscape has NO override in landing page, so remove */

    .option-btn {
        padding: 5px 20px;
        min-height: 44px;  /* +10%: 40px → 44px */
    }

    /* Results - Landscape with 30% image reduction and spacing adjustments */
    .score-image-container {
        max-width: min(24.5vh, 126px);  /* min(35vh, 180px) - 30% */
        margin-bottom: 3px;
    }

    .score-feedback-title {
        font-size: clamp(0.7rem, 2vh, 1rem);
        margin-bottom: 2px;
    }

    .score-feedback-text {
        margin-bottom: 2.24px;  /* 2.8px - 20% */
        font-size: clamp(0.6rem, 1.8vh, 0.9rem);
        letter-spacing: 1px;
        width: 80%;  /* Wider in landscape for readability */
    }

    /* Game Feedback Text - Landscape adjustments */
    .game-feedback-text {
        font-size: clamp(0.36rem, 1.08vh, 0.54rem);  /* -40% reduction */
        line-height: 1.3;
        margin-top: 5%;
        margin-bottom: 2px;
        width: auto;
        max-width: 64%;  /* Match button width on landscape */
        letter-spacing: 0.5px;
    }

    /* Feedback Button - Landscape adjustments */
    .btn-feedback {
        padding: 4px 20px;
        font-size: clamp(0.65rem, 1.8vh, 0.85rem);
        letter-spacing: 1px;
        margin-top: 5px;
        min-height: 36px;
        width: auto;
        max-width: 64%;  /* 20% reduction from 80% */
        white-space: nowrap;  /* Keep text on one line */
    }

    .final-score {
        margin-bottom: 3px;
        font-size: clamp(1.2rem, 6vh, 2rem);
        letter-spacing: 2px;
    }
}