/* ===================================== */
/* GLOBAL RESET */
/* ===================================== */


* {

    box-sizing: border-box;

}



html,
body {

    width:100%;
    height:100%;

    margin:0;

    padding:0;

    overflow:hidden;

    font-family:

        Arial,
        Helvetica,
        sans-serif;

    background:#050505;

}


/* ===================================== */
/* BACKGROUND */
/* ===================================== */


.background {

    position:fixed;

    inset:0;

    background:

        radial-gradient(
            circle at top,
            #243b55,
            #000000 70%
        );

    z-index:-1;

}



/* ===================================== */
/* PLAYER CONTAINER */
/* ===================================== */


.player {

    width:100%;

    height:100vh;

    height:100dvh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    position:relative;

}



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


.course-header {

    flex-shrink:0;

    padding:10px 14px;

}



/* ===================================== */
/* COURSE BAR */
/* ===================================== */


.course-bar {


    display:flex;

    justify-content:space-between;

    align-items:center;


    background:

        rgba(0,0,0,.45);


    border-radius:12px;


    padding:12px 15px;


    color:white;


    font-size:clamp(
        14px,
        2vw,
        22px
    );


}



.course-left {

    font-weight:bold;

}



.course-right {

    opacity:.9;

}




/* ===================================== */
/* PROGRESS BAR */
/* ===================================== */


.progress-container {


    margin-top:8px;


    width:100%;


    height:8px;


    background:

        rgba(255,255,255,.15);


    border-radius:20px;


    overflow:hidden;


}



#courseProgress {


    width:1%;


    height:100%;


    background:

        linear-gradient(
            90deg,
            #00e5ff,
            #00ff88
        );


    transition:.4s;


}

/* ===================================== */
/* MAIN AREA */
/* ===================================== */


main {

    flex:1;

    min-height:0;

    display:flex;

    padding:10px 14px 14px;

}



/* ===================================== */
/* MAIN CARD */
/* ===================================== */


.card {


    flex:1;

    min-height:0;


    background:

        rgba(255,255,255,.08);


    backdrop-filter:

        blur(12px);


    border-radius:22px;


    border:

        1px solid

        rgba(255,255,255,.15);


    overflow:hidden;


    display:flex;


}



/* ===================================== */
/* CONTENT VIEWPORT */
/* ONLY SCROLLABLE AREA */
/* ===================================== */


.content-viewport {


    flex:1;


    min-height:0;


    overflow-y:auto;


    overflow-x:hidden;


    padding:20px;


    scroll-behavior:smooth;


}



/* ===================================== */
/* HIDE SCROLLBAR */
/* CLEAN LIVE LOOK */
/* ===================================== */


.content-viewport::-webkit-scrollbar {


    width:6px;


}



.content-viewport::-webkit-scrollbar-thumb {


    background:

        rgba(255,255,255,.25);


    border-radius:20px;


}



/* ===================================== */
/* SCREEN SYSTEM */
/* ===================================== */


.screen {


    display:none;


    width:100%;


    min-height:100%;


}



.screen.active {


    display:flex;


    flex-direction:column;


}



/* ===================================== */
/* QUESTION CONTENT */
/* ===================================== */


.question-content {


    width:100%;


    display:flex;


    flex-direction:column;


    gap:18px;


}




/* QUESTION NUMBER */
/* ===================================== */


#questionNumber {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    width:max-content;


    padding:8px 14px;


    border-radius:20px;


    background:

        rgba(0,229,255,.15);


    color:#00e5ff;


    font-weight:bold;


    font-size:clamp(
        14px,
        2vw,
        20px
    );


}



/* ===================================== */
/* QUESTION TEXT */
/* ===================================== */


#question {

    margin:0;

    color:white;

    line-height:1.35;

    font-size:clamp(
        18px,
        2.5vw,
        34px
    );

    overflow-wrap:anywhere;

    transition:
        font-size .3s ease;

}

/* ===================================== */
/* ANSWER OPTIONS */
/* ===================================== */


#options {


    display:flex;


    flex-direction:column;


    gap:14px;


    width:100%;


}



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


.option {


    width:100%;


    min-height:60px;


    padding:14px 18px;


    display:flex;


    align-items:center;


    gap:12px;


    border-radius:16px;


    background:

        rgba(255,255,255,.10);


    border:

        1px solid

        rgba(255,255,255,.18);


    color:white;


    font-size:clamp(
        17px,
        2.4vw,
        24px
    );


    cursor:pointer;


    transition:

        transform .2s ease,
        background .2s ease,
        border .2s ease;


}

/* Short questions */

#question.question-short {

    font-size:clamp(
        24px,
        3vw,
        34px
    );

}


/* Medium questions */

#question.question-medium {

    font-size:clamp(
        20px,
        2.5vw,
        28px
    );

}


/* Long questions */

#question.question-long {

    font-size:clamp(
        16px,
        2vw,
        22px
    );

}


/* LETTER LABEL */

.option-letter {


    width:38px;


    height:38px;


    flex-shrink:0;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

        rgba(0,229,255,.20);


    color:#00e5ff;


    font-weight:bold;


}




.option:hover {


    transform:translateY(-2px);


    background:

        rgba(255,255,255,.18);


}



/* ===================================== */
/* SELECTED ANSWER */
/* ===================================== */


.option.selected {


    background:

        rgba(0,229,255,.25);


    border-color:#00e5ff;


}



/* ===================================== */
/* CORRECT ANSWER */
/* ===================================== */


.option.correct {


    background:

        rgba(0,255,120,.25);


    border-color:#00ff78;


}



/* ===================================== */
/* WRONG ANSWER */
/* ===================================== */


.option.wrong {


    background:

        rgba(255,50,50,.25);


    border-color:#ff5050;


}

/* ===================================== */
/* THINK SCREEN */
/* ===================================== */


.think-content {


    flex:1;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    text-align:center;


    color:white;


    gap:20px;


}



/* THINK ICON */


.think-icon {


    font-size:clamp(
        60px,
        10vw,
        100px
    );


}



/* THINK TITLE */


.think-content h2 {


    margin:0;


    font-size:clamp(
        26px,
        4vw,
        42px
    );


}



/* DESCRIPTION */


.think-content p {


    margin:0;


    opacity:.8;


    font-size:clamp(
        16px,
        2vw,
        24px
    );


}

/* ===================================== */
/* LARGE COUNTDOWN TIMER */
/* ===================================== */


.timer-display {


    width:130px;


    height:130px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

        rgba(0,229,255,.12);


    border:

        4px solid

        #00e5ff;


    box-shadow:

        0 0 30px

        rgba(0,229,255,.4);


}



#timerText {


    color:white;


    font-size:clamp(
        45px,
        8vw,
        70px
    );


    font-weight:bold;


}



/* ===================================== */
/* TIMER PROGRESS BAR */
/* ===================================== */


.timer-bar {


    width:90%;


    max-width:600px;


    height:14px;


    border-radius:20px;


    overflow:hidden;


    background:

        rgba(255,255,255,.15);


}



#timerFill {


    height:100%;


    width:100%;


    background:

        linear-gradient(
            90deg,
            #00e5ff,
            #00ff88
        );


    transition:

        width 1s linear;


}

/* ===================================== */
/* EXPLANATION SCREEN */
/* ===================================== */


.explanation-content {


    width:100%;


    display:flex;


    flex-direction:column;


    gap:18px;


    color:white;


}



/* ===================================== */
/* ANSWER CARD */
/* ===================================== */


.answer-card {


    background:

        rgba(0,255,120,.12);


    border:

        2px solid

        rgba(0,255,120,.45);


    border-radius:18px;


    padding:18px;


}



/* ANSWER TITLE */


.answer-card h2 {


    margin:0 0 12px;


    font-size:clamp(
        20px,
        3vw,
        32px
    );


}



/* CORRECT ANSWER TEXT */


#correctAnswer {


    font-size:clamp(
        24px,
        4vw,
        40px
    );


    font-weight:bold;


    color:#00ff88;


    overflow-wrap:anywhere;


}

/* ===================================== */
/* EXPLANATION CARD */
/* ===================================== */


.explanation-card {


    background:

        rgba(255,255,255,.08);


    border:

        1px solid

        rgba(255,255,255,.18);


    border-radius:18px;


    padding:18px;


}



/* EXPLANATION TITLE */


.explanation-card h2 {


    margin:

        0 0 12px;


    font-size:clamp(
        20px,
        3vw,
        30px
    );


}



/* EXPLANATION TEXT */


#feedback {


    margin:0;


    font-size:clamp(
        17px,
        2.5vw,
        25px
    );


    line-height:1.6;


    color:

        rgba(255,255,255,.95);


    overflow-wrap:anywhere;


}

/* ===================================== */
/* NEXT QUESTION TIMER */
/* ===================================== */


.next-box {


    margin-top:auto;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:12px;


    padding:16px;


    border-radius:18px;


    background:

        rgba(0,229,255,.12);


    border:

        1px solid

        rgba(0,229,255,.35);


}



/* LABEL */


.next-box span {


    font-size:clamp(
        16px,
        2vw,
        22px
    );


}



/* NUMBER */


#nextCountdown {


    font-size:clamp(
        32px,
        5vw,
        50px
    );


    color:#00e5ff;


    font-weight:bold;


}


/* ===================================== */
/* SMALL SCREEN OPTIMIZATION */
/* ===================================== */


@media(max-width:600px){


    .course-header {


        padding:

            8px;


    }



    .course-bar {


        padding:

            10px;


        font-size:

            14px;


    }



    main {


        padding:

            8px;


    }



    .content-viewport {


        padding:

            14px;


    }



    #question {


        font-size:

            21px;


    }



    .option {


        min-height:

            56px;


        padding:

            12px;


        font-size:

            16px;


    }



    .answer-card,
    .explanation-card {


        padding:

            14px;


    }



    #feedback {


        font-size:

            16px;


    }


}

/* ===================================== */
/* LARGE SCREENS */
/* ===================================== */


@media(min-width:1000px){


    .player {


        max-width:

            900px;


        margin:

            auto;


    }



    .content-viewport {


        padding:

            30px;


    }



}





@keyframes promoIn {


    from {


        transform:scale(.8);


        opacity:0;


    }


    to {


        transform:scale(1);


        opacity:1;


    }


}






/* QR AREA */


#qrcode {


    margin:

        20px auto;


    background:white;


    padding:15px;


    width:max-content;


    border-radius:15px;


}



/* URL TEXT */


.promo-url {


    color:#00e5ff;


    font-weight:bold;


    font-size:20px;


}

.promo-content {

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

    gap:20px;

}


#promoTitle {

    font-size:clamp(
        28px,
        5vw,
        50px
    );

}


#promoMessage {

    font-size:clamp(
        18px,
        3vw,
        28px
    );

}


#promoUrl {

    color:#00e5ff;

    font-size:22px;

    font-weight:bold;

}


.answer-reveal-label {


    margin-top:20px;


    padding:15px;


    border-radius:15px;


    background:

        rgba(0,255,120,.15);


    border:

        1px solid

        rgba(0,255,120,.5);


    color:#00ff88;


    font-size:24px;


    font-weight:bold;


}

/* ===================================== */
/* QUESTION FACE TIMER */
/* COMPACT VERSION */
/* ===================================== */


.question-timer {

    width:100%;

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:10px;

}



/* SMALL COUNTDOWN */

#questionTimerText {


    color:#00e5ff;


    font-size:22px;


    font-weight:bold;


    min-width:45px;


    text-align:center;


}



/* SMALL PROGRESS BAR */

.question-timer .timer-bar {


    flex:1;


    height:8px;


    background:

        rgba(255,255,255,.15);


    border-radius:20px;


    overflow:hidden;


}



#questionTimerFill {


    height:100%;


    width:100%;


    background:

        linear-gradient(
            90deg,
            #00e5ff,
            #00ff88
        );


    transition:

        width 1s linear;


}

.question-timer .timer-display {

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ===================================== */
/* PLAYER CONTROLS */
/* ===================================== */

.player-controls{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    display:flex;

    gap:15px;

    padding:12px 18px;

    border-radius:40px;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(10px);

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:1000;

}


.player-controls.show{

    opacity:1;

    pointer-events:auto;

}


.player-btn{

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:22px;

    background:#00bcd4;

    color:white;

}


.player-btn:hover{

    transform:scale(1.08);

}

/* ===================================== */
/* THINK QUESTION AREA */
/* ===================================== */


#thinkQuestionArea {

    width:100%;

    margin-top:15px;

}



#thinkQuestionNumber {

    color:#00e5ff;

    font-size:18px;

    font-weight:bold;

}



#thinkQuestion {

    color:white;

    line-height:1.35;

    font-size:clamp(
        16px,
        2vw,
        24px
    );

}



#thinkOptions {

    margin-top:15px;

}



.think-option {

    margin-bottom:8px;

    padding:10px;

    font-size:18px;

}

/* ===================================== */
/* THINK OPTION BASE */
/* ===================================== */

.think-option{

    transition:
        transform .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        opacity .35s ease;

    opacity:.55;

    transform:scale(.98);

}

/* ===================================== */
/* ACTIVE THINK OPTION */
/* ===================================== */

.think-option.active{

    opacity:1;

    transform:scale(1.03);

    border:2px solid #00e5ff;

    background:rgba(0,229,255,.15);

    box-shadow:
        0 0 8px rgba(0,229,255,.35),
        0 0 18px rgba(0,229,255,.25);

    animation:
        optionPulse .9s ease-in-out infinite;

}


.think-option.active .option-letter{

    background:#00e5ff;

    color:#000;

    transform:scale(1.15);

    transition:all .3s ease;

}

/* ===================================== */
/* OPTION PULSE */
/* ===================================== */

@keyframes optionPulse{

    0%{

        transform:scale(1.02);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1.02);

    }

}
/* ===================================== */
/* INTRO SCREEN */
/* ===================================== */

#introScreen{

    text-align:center;

}


.intro-content{

    width:90%;

    max-width:700px;

    margin:auto;

    padding:40px;

    border-radius:25px;

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

    backdrop-filter:blur(12px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

}


.intro-icon{

    font-size:80px;

    margin-bottom:20px;

    animation:introPulse 2s ease-in-out infinite;

}


.intro-content h1{

    margin:0 0 15px;

    color:white;

    font-size:clamp(
        32px,
        5vw,
        56px
    );

}


#introCourseTitle{

    margin:0 0 25px;

    color:#00e5ff;

    font-size:clamp(
        22px,
        3vw,
        34px
    );

}


#introMessage{

    color:#ffffff;

    line-height:1.6;

    font-size:clamp(
        18px,
        2vw,
        24px
    );

}


.intro-timer{

    margin-top:35px;

    color:#00ff88;

    font-size:30px;

    font-weight:700;

    letter-spacing:1px;

}


/* ===================================== */
/* INTRO ANIMATION */
/* ===================================== */

@keyframes introPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/* ===================================== */
/* INTRO COUNTDOWN */
/* ===================================== */

.intro-timer {

    margin-top:35px;

    display:flex;

    justify-content:center;

    align-items:center;


}



#introTimerText {


    width:90px;

    height:90px;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:50%;


    background:

        rgba(0,229,255,0.15);


    border:

        3px solid #00e5ff;


    color:white;


    font-size:45px;


    font-weight:bold;


    box-shadow:

        0 0 25px rgba(0,229,255,.5);


    animation:

        timerPulse 1s infinite;


}



@keyframes timerPulse {


    0% {

        transform:scale(1);

    }


    50% {

        transform:scale(1.08);

    }


    100% {

        transform:scale(1);

    }


}

.seo-content{

max-width:1100px;

margin:80px auto;

padding:40px;

background:#ffffff;

border-radius:15px;

box-shadow:0 5px 18px rgba(0,0,0,.08);

line-height:1.8;

}

.seo-content h1{

font-size:2rem;

color:#2563eb;

margin-bottom:20px;

}

.seo-content ul{

padding-left:25px;

}

.seo-content li{

margin-bottom:10px;

}

/* =====================================
   Floating Back Button
===================================== */

.back-button {

    position: fixed;

    top: 20px;
    left: 20px;

    width: 45px;
    height: 45px;

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

    background: rgba(37,99,235,.95);

    color:white;

    font-size:28px;

    font-weight:bold;

    text-decoration:none;

    border-radius:50%;

    z-index:99999;

    box-shadow:
    0 5px 15px rgba(0,0,0,.25);


    /* Hidden initially */

    opacity:0;

    pointer-events:none;

    transform:scale(.8);


    transition:
    opacity .3s ease,
    transform .3s ease;

}


/* Visible state */

.back-button.show {

    opacity:1;

    pointer-events:auto;

    transform:scale(1);

}



@media(max-width:768px){

    .back-button{

        top:12px;

        left:12px;

        width:40px;

        height:40px;

        font-size:24px;

    }

}