@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Vazirmatn:wght@400;500;600;700&display=swap');

/* =======================
   Design Tokens
======================= */

:root{

    --bg:#0f1117;

    --surface:#171a23;
    --surface-2:#202431;

    --line:#2a3040;

    --text:#f4f4f5;
    --text-muted:#9ca3af;

    --accent:#e8b95a;
    --accent-hover:#f2cb7a;

    --success:#4fb3a9;
    --danger:#e8735a;

    --radius-lg:22px;
    --radius-md:14px;
    --radius-sm:10px;

    --font-body:'Vazirmatn',Tahoma,sans-serif;
    --font-mono:'JetBrains Mono',monospace;
}


/* =======================
   Reset
======================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}


html{
    -webkit-text-size-adjust:100%;
}


body{

    font-family:var(--font-body);

    background:
    radial-gradient(
        circle at 1px 1px,
        rgba(255,255,255,.025) 1px,
        transparent 0
    ) 0 0/30px 30px,
    var(--bg);

    color:var(--text);

    min-height:100dvh;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:80px 14px;
}


button{
    font-family:inherit;
}



/* =======================
   Main Cards
======================= */


.container,
.start-screen,
.result-screen{

    width:100%;

    max-width:620px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.02),
        transparent
    ),
    var(--surface);


    border:1px solid var(--line);

    border-radius:var(--radius-lg);


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


    padding:30px 22px;
}


/* =======================
   Typography
======================= */


h1{

    text-align:center;

    font-size:24px;

    font-weight:700;

    letter-spacing:-0.03em;

    margin-bottom:10px;

}


.description{

    text-align:center;

    color:var(--text-muted);

    font-size:14px;

    margin-bottom:24px;

}


/* =======================
   Start Screen
======================= */


.start-screen{

    text-align:center;

}


.start-screen p{

    color:var(--text-muted);

    font-size:14px;

    line-height:2;

    margin:20px 0 28px;

}



.age-box{

    margin:25px 0;

}


.age-box label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:500;

}



#ageInput{

    width:100%;

    max-width:170px;

    padding:13px;

    background:var(--surface-2);

    color:var(--text);

    border:1px solid var(--line);

    border-radius:var(--radius-md);

    text-align:center;

    font-family:var(--font-mono);

    font-size:17px;

    outline:none;

    transition:.2s;

}



#ageInput:focus{

    border-color:var(--accent);

    box-shadow:
    0 0 0 4px rgba(232,185,90,.12);

}



#startBtn,
#resultScreen button{


    width:100%;

    padding:15px;

    border:none;

    border-radius:var(--radius-md);


    background:var(--accent);

    color:#181208;


    font-size:16px;

    font-weight:700;


    cursor:pointer;


    transition:.2s;

}


#startBtn:hover,
#resultScreen button:hover{

    background:var(--accent-hover);

}


#startBtn:active,
#resultScreen button:active{

    transform:scale(.98);

}




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


.timer{

    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:12px 14px;

    background:var(--surface-2);

    border:1px solid var(--line);

    border-radius:var(--radius-md);


    margin-bottom:16px;


    color:var(--text-muted);

    font-size:13px;

}



#time{

    font-family:var(--font-mono);

    color:var(--text);

    font-weight:700;

}



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


.progress{

    display:flex;

    justify-content:space-between;


    font-size:13px;

    color:var(--text-muted);

    margin-bottom:10px;

}



#currentQuestion,
#totalQuestions{

    font-family:var(--font-mono);

    color:var(--text);

}



.progress-bar{

    height:6px;

    width:100%;

    background:var(--surface-2);

    border-radius:20px;

    overflow:hidden;

    margin-bottom:24px;

}



.progress-fill{

    height:100%;

    width:0%;

    background:var(--accent);

    transition:.3s;

}



#progressPercent{

    color:var(--accent);

    font-family:var(--font-mono);

}




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


.question-box{

    min-height:170px;

    padding:14px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:var(--surface-2);

    border:1px solid var(--line);

    border-radius:var(--radius-md);

    overflow:hidden;

    margin-bottom:22px;

}



.question-box img{

    width:auto;

    max-width:100%;

    height:auto;

    max-height:160px;

    object-fit:contain;

}

.question-box img{
    display:block;
    opacity:1;
}




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


.answers{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:8px;

    direction:ltr;

}



.answer{

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;


    background:var(--surface-2);

    border:1px solid var(--line);

    border-radius:10px;


    color:var(--text);

    font-family:var(--font-mono);

    font-size:15px;

    font-weight:600;


    cursor:pointer;

    transition:.2s;

}



.answer:hover{

    border-color:var(--accent);

    transform:translateY(-2px);

}



.answer.selected{

    border-color:var(--success);

    background:rgba(79,179,169,.12);

    color:var(--success);

}




/* =======================
 Controls
======================= */


.controls{

    display:flex;

    gap:12px;

    margin-top:26px;

}



.controls button{

    flex:1;

    padding:14px;


    border-radius:var(--radius-md);

    border:1px solid var(--line);


    background:var(--surface-2);

    color:var(--text);


    font-weight:600;

    cursor:pointer;

}



#nextBtn{

    background:var(--accent);

    color:#181208;

    border-color:var(--accent);

}



/* =======================
 Result
======================= */


.result-screen{

    text-align:center;

}



.iq-box{

    width:160px;

    height:160px;


    margin:25px auto;


    border-radius:50%;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    background:var(--surface-2);

    border:1px solid var(--line);

}



#iqValue{

    font-family:var(--font-mono);

    font-size:46px;

    font-weight:700;

}



#iqLabel{

    color:var(--text-muted);

    font-size:12px;

}



.iq-level{

    font-size:17px;

    font-weight:700;

}



.stats{

    margin:20px 0 28px;

    color:var(--text-muted);

    line-height:2;

}



#scoreText{

    color:var(--text);

    font-weight:600;

}



/* =======================
 Footer
======================= */


.designer-credit{

    width:100%;

    text-align:center;

    margin-top:22px;

    font-size:12px;

    color:var(--text-muted);

    opacity:.75;

    letter-spacing:.08em;

}




/* =======================
 Mobile
======================= */


@media(max-width:640px){

    body{
           padding:35px 10px 20px;
    }


    .container{

        padding:18px 14px;

    }


    h1{

        font-size:20px;

    }


    .description{

        margin-bottom:12px;

    }


    .question-box{

        margin:12px 0;

    }


    .controls{

        margin-top:16px;

    }


    .controls button{

        padding:10px;

        font-size:13px;

    }

}



@media(min-width:700px){


    h1{

        font-size:28px;

    }


    .container,
    .start-screen,
    .result-screen{

        padding:45px;

    }


}

.designer-credit{
    margin-top:auto;
    padding-top:20px;
    width:100%;
    text-align:center;
}