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

body{

    font-family:Segoe UI,Arial,sans-serif;

    background:#07111f;

    color:white;

    overflow:hidden;

}

/* ============================= */
/* Animated Background */
/* ============================= */

.background{

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at top,#124d96,#07111f 65%);

    z-index:-2;

}

.background::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:40px 40px;

}

/* ============================= */

.player{

    width:min(1100px,95%);

    margin:auto;

    height:100dvh;          /* Dynamic viewport height */

    max-height:100dvh;

    display:flex;

    flex-direction:column;

    padding:12px;

    overflow:hidden;

}
/* ============================= */

header{

    text-align:center;

    padding:15px 0;

}

header h1{

    font-size:52px;

    margin-bottom:15px;

}

#progress{

    font-size:28px;

    color:#8ec5ff;

}

/* ============================= */

main{

    flex:1;

    min-height:0;

    display:flex;

    overflow:hidden;

}

/* ============================= */

.card{

    flex:1;

    width:100%;

    min-height:0;

    background:#14263d;

    border:3px solid #2f7fdc;

    border-radius:25px;

    padding:24px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

.question-content{

    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;

}

#options{

    flex:1;

}
/* ============================= */

#questionNumber{

    font-size:28px;

    color:#ffd54f;

    margin-bottom:20px;

}

#question{

    font-size:30px;

    line-height:1.25;

    margin-bottom:25px;

}

/* ============================= */

.option{

    padding:18px;

    margin-bottom:12px;

    border-radius:16px;

    background:#233f63;

    border:2px solid transparent;

    font-size:30px;

}

.option:hover{

    border-color:#4aa3ff;

}

/* ============================= */

.answer-card{

    width:100%;

    background:#163f26;

    border-radius:25px;

    border:3px solid #52d273;

    padding:25px;

    text-align:center;

}

.answer-card h2{

    font-size:25px;

}

#correctAnswer{

    font-size:40px;

    color:#6dff8d;

    margin:25px 0;

}

#feedback{

    font-size:32px;

    line-height:1.6;

}

.hidden{

    display:none;

}

/* ============================= */
/* Timer */
/* ============================= */

.timer-area{

margin-top:auto;

padding-top:25px;

}

.timer-label{

font-size:28px;

margin-bottom:12px;

text-align:center;

}

.timer-bar{

height:24px;

background:#2b3441;

border-radius:30px;

overflow:hidden;

}

#timerFill{

width:100%;

height:100%;

background:#36c46d;

transition:1s linear;

}

#timerText{

text-align:center;

font-size:28px;

margin-top:15px;

color:#ffd54f;

}

/* ============================= */

.next-label{

margin-top:35px;

font-size:30px;

}

#nextCountdown{

font-size:90px;

margin-top:15px;

color:#ffd54f;

}

/* =======================================
   THINK TIME
======================================= */

#thinkArea{

margin-top:40px;

text-align:center;

animation:fadeIn .5s;

}

.think-title{

font-size:34px;

margin-bottom:20px;

color:#ffd54f;

}

#thinkCountdown{

font-size:90px;

font-weight:bold;

color:#ffffff;

}


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

#explanationArea{

margin-top:20px;

padding:20px;

border-radius:20px;

background:#183a22;

border:2px solid #3bc66b;

animation:fadeIn .6s;

}

#explanationArea h2{

font-size:40px;

margin-bottom:20px;

}

#feedback{

font-size:30px;

line-height:1.6;

margin-top:20px;

}


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

.option.correct{

background:#1d6f35;

border-color:#6eff96;

color:white;

box-shadow:0 0 20px rgba(0,255,0,.4);

transform:scale(1.02);

}


/* =======================================
   FADE
======================================= */

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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


.brand-header{

text-align:center;

margin-bottom:30px;

}



.brand-title{

font-size:48px;

font-weight:bold;

color:white;

}



#courseTitle{

font-size:32px;

margin-top:10px;

color:#ffd54f;

font-weight:bold;

}



#progress{

font-size:28px;

margin-top:15px;

color:#ffffff;

}



/* Progress bar */


.progress-container{

width:90%;

height:20px;

background:#263238;

border-radius:20px;

overflow:hidden;

margin:20px auto;

}



#courseProgress{

height:100%;

width:0%;

background:#36c66b;

transition:.5s ease;

}
@media(max-width:700px){

.brand-title{

font-size:36px;

}


#courseTitle{

font-size:24px;

}


#question{

font-size:28px;

}


.option{

font-size:22px;

padding:15px;

}


.timer-label{

font-size:22px;

}


}


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

.course-bar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 25px;

font-size:26px;

font-weight:bold;

}

.course-left{

color:#ffd54f;

}

.course-right{

color:#ffffff;

}

.progress-container{

width:100%;

height:12px;

background:#263238;

border-radius:30px;

overflow:hidden;

margin-bottom:20px;

}

#courseProgress{

height:100%;

width:0%;

background:#36c66b;

transition:.5s;

}

/* =====================================
   PROMOTION OVERLAY
===================================== */

.promo-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(5,10,20,.96);

z-index:99999;

}

.promo-overlay.hidden{

display:none;

}

.promo-card{

width:min(750px,90%);

background:#13253b;

padding:50px;

border-radius:25px;

border:3px solid #2f7fdc;

text-align:center;

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

animation:promoPop .5s;

}

@keyframes promoPop{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.promo-logo{

font-size:90px;

margin-bottom:20px;

}

#promoTitle{

font-size:48px;

margin-bottom:20px;

}

#promoText{

font-size:28px;

line-height:1.6;

margin-bottom:35px;

}

.promo-button{

padding:18px 35px;

font-size:24px;

border:none;

border-radius:12px;

background:#2196f3;

color:white;

cursor:pointer;

margin-bottom:35px;

}

.promo-button:hover{

background:#1976d2;

}

.promo-countdown{

width:100px;

height:100px;

margin:auto;

border-radius:50%;

background:#36c66b;

display:flex;

align-items:center;

justify-content:center;

font-size:46px;

font-weight:bold;

margin-bottom:25px;

}

.promo-footer{

font-size:24px;

opacity:.8;

}

/* =====================================
   SCREEN FADE
===================================== */

.fade-out{

opacity:0;

transform:scale(.98);

transition:.5s ease;

}

.fade-in{

opacity:1;

transform:scale(1);

transition:.5s ease;

}

/* =====================================
   QR CODE
===================================== */


#promoQR{

width:170px;

height:170px;

margin:25px auto;

background:white;

padding:10px;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

}


#promoQR img{

width:150px;

height:150px;

}


.scan-text{

font-size:24px;

margin-bottom:20px;

color:#ffd54f;

}

.promo-url{

margin-top:15px;

font-size:22px;

font-weight:bold;

color:#8ec5ff;

word-break:break-word;

}

.fade-out{

opacity:0;

transition:.5s;

}

/* ===================================== */
/* LEARNING MODE TRANSITIONS */
/* ===================================== */


#questionMode,
#explanationMode {

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

}


/* Hidden learning mode */

.mode-hidden {

    opacity: 0;

    transform: translateY(-40px);

    pointer-events: none;

    position: absolute;

    width: 100%;

}


/* Visible learning mode */

.mode-visible {

    opacity: 1;

    transform: translateY(0);

    position: relative;

}

/* ===================================== */
/* EXPLANATION MODE */
/* ===================================== */


#explanationMode {

    height: 100%;

}


#explanationArea {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 20px;

    max-height: 100%;

    overflow-y: auto;

}


/* Correct answer */

#correctAnswer {

    font-weight: bold;

}



/* Explanation text */

#feedback {

    width: 100%;

    max-width: 900px;

    line-height: 1.6;

}

@media(max-width:600px){


    #question {

        font-size: 24px !important;

    }


    #feedback {

        font-size: 18px;

    }


    #correctAnswer {

        font-size: 22px;

    }


    #explanationArea {

        padding:15px;

    }


}


/* =======================================
   REVIEW LAYOUT
======================================= */

.review-layout{

    display:flex;

    gap:30px;

    align-items:flex-start;

}

#explanationArea{

    flex:3;

}

.learning-sidebar{

    flex:1;

    min-width:260px;

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

    border-left:5px solid #22c55e;

    border-radius:18px;

    padding:20px;

    text-align:center;

}


.sidebar-title{

    font-size:26px;

    font-weight:bold;

    margin-bottom:20px;

}

.sidebar-text{

    margin-top:20px;

    line-height:1.7;

    font-size:18px;

}

.sidebar-url{

    margin-top:20px;

    font-size:22px;

    font-weight:bold;

    color:#00ff88;

}

#sidebarQR{

    background:white;

    padding:10px;

    border-radius:15px;

    width:200px;

    height:200px;

    margin:20px auto;

    display:flex;

    justify-content:center;

    align-items:center;

}

@media (max-width:900px){

.review-layout{

    flex-direction:column;

}

.learning-sidebar{

    width:100%;

    min-width:unset;

}

#sidebarQR{

    width:170px;

    height:170px;

}

}