/* ==========================================
   iClicMIL Truth Detective
========================================== */

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

body{

    font-family:'Inter',sans-serif;

    background:#f5f7fb;

    color:#333;

}

/* ===========================
   Hero
=========================== */

.game-hero{

    text-align:center;

    padding:60px 20px 40px;

}

.game-hero h1{

    font-size:2.7rem;

    color:#5B4DFF;

    margin-bottom:15px;

}

.game-hero p{

    max-width:700px;

    margin:auto;

    color:#666;

    line-height:1.8;

    font-size:1.05rem;

}

/* ===========================
   Mission Card
=========================== */

.mission-card{

    width:90%;

    max-width:750px;

    margin:30px auto;

    background:#fff;

    border-radius:24px;

    padding:40px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.mission-badge{

    display:inline-block;

    padding:10px 22px;

    background:#5B4DFF;

    color:white;

    border-radius:30px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:25px;

}

.mission-card h2{

    font-size:2rem;

    margin-bottom:20px;

}

.mission-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:30px;

}

.mission-info{

    display:flex;

    justify-content:center;

    gap:50px;

    margin-bottom:35px;

    flex-wrap:wrap;

}

.mission-info div{

    background:#f8f9ff;

    padding:20px;

    border-radius:18px;

    min-width:180px;

}

/* ===========================
   Start Button
=========================== */

.start-btn{

    background:linear-gradient(135deg,#5B4DFF,#7B6DFF);

    color:white;

    border:none;

    padding:18px 40px;

    border-radius:16px;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 12px 25px rgba(91,77,255,.25);

}

.start-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(91,77,255,.35);

}

/* ===========================
   Quiz Section
=========================== */

.quiz-section{

    display:none;

    width:90%;

    max-width:850px;

    margin:40px auto 80px;

}

.quiz-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:20px;

    font-weight:700;

    flex-wrap:wrap;

    gap:15px;

}

/* ===========================
   Progress Bar
=========================== */

.progress-bar{

    height:12px;

    background:#ddd;

    border-radius:30px;

    overflow:hidden;

    margin-bottom:30px;

}

#progressFill{

    width:0%;

    height:100%;

    background:#5B4DFF;

    transition:.4s;

}

/* ===========================
   Question Card
=========================== */

.question-card{

    background:white;

    border-radius:24px;

    padding:40px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.question-card h2{

    margin-bottom:30px;

    line-height:1.6;

}

/* ===========================
   Answers
=========================== */

.answers{

    display:grid;

    gap:18px;

}

.answer-btn{

    background:#fff;

    border:2px solid #ddd;

    border-radius:16px;

    padding:18px;

    text-align:left;

    cursor:pointer;

    transition:.3s;

    font-size:1rem;

}

.answer-btn:hover{

    border-color:#5B4DFF;

    background:#f8f7ff;

    transform:translateX(6px);

}

.answer-btn.correct{

    background:#d9f9ea;

    border-color:#00C896;

}

.answer-btn.wrong{

    background:#ffe3e3;

    border-color:#ff4b4b;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:768px){

.game-hero h1{

    font-size:2rem;

}

.mission-card{

    padding:25px;

}

.question-card{

    padding:25px;

}

.mission-info{

    gap:20px;

}

}

@media(max-width:500px){

.quiz-header{

    flex-direction:column;

}

.start-btn{

    width:100%;

}

.answer-btn{

    font-size:.95rem;

}

}
/* =====================================
   Feedback Card
===================================== */

.feedback-card{

    display:none;

    margin-top:30px;

    background:#f8f9ff;

    border-left:6px solid #5B4DFF;

    padding:25px;

    border-radius:18px;

    animation:fadeIn .4s ease;

}

.feedback-card h3{

    color:#5B4DFF;

    margin-bottom:15px;

}

.feedback-card p{

    color:#555;

    line-height:1.8;

    margin-bottom:25px;

}

@keyframes fadeIn{

from{

    opacity:0;

    transform:translateY(15px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}