*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial;
    background:#edf6ff;
}

.container{
    max-width:800px;
    margin:auto;
    padding:clamp(16px,5vw,40px);
    text-align:center;
}

h1{
    color:#1565C0;
    font-size:clamp(22px,5vw,32px);
}

.subtitle{
    font-size:clamp(14px,3.5vw,18px);
    margin-bottom:clamp(16px,4vw,30px);
}

.score{
    font-size:clamp(16px,4vw,22px);
    margin-bottom:20px;
    font-weight:bold;
}

.questionBox{
    background:white;
    padding:clamp(20px,6vw,40px);
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.expression{
    font-size:clamp(26px,9vw,50px);
    font-weight:bold;
    letter-spacing:clamp(2px,1.5vw,10px);
    word-break:break-word;
    line-height:1.3;
}

.highlight{
    background:yellow;
    color:#b71c1c; /* sedikit digelapkan dari merah default agar kontras dengan kuning lebih terbaca (WCAG) */
    padding:4px 8px;
    border-radius:8px;
    white-space:nowrap;
}

.buttonArea{
    margin-top:clamp(20px,5vw,35px);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

button{
    padding:15px 25px;
    font-size:clamp(15px,4vw,18px);
    border:none;
    border-radius:12px;
    cursor:pointer;
    margin:0; /* diganti pakai gap di .buttonArea, biar rapi saat wrap */
    flex:1 1 140px; /* tombol otomatis melebar/menyusut, tetap rapi walau wrap ke baris baru */
    max-width:220px;
    min-height:48px; /* target sentuh minimal yang nyaman di HP */
}

#operationBtn{
    background:#4CAF50;
    color:white;
}

#numberBtn{
    background:#2196F3;
    color:white;
}

.next{
    display:none;
    margin-top:25px;
    background:#ff9800;
    color:white;
    flex-basis:100%; /* tombol "next" turun sendiri ke baris baru, tidak berdempetan dengan tombol lain */
    max-width:280px;
    margin-left:auto;
    margin-right:auto;
}

.feedback{
    font-size:clamp(17px,4.5vw,22px);
    font-weight:bold;
    margin-top:25px;
    min-height:35px; /* diganti dari height agar teks feedback panjang tidak terpotong di layar sempit */
}

.correct{
    color:green;
}

.wrong{
    color:red;
}

/* =====================================
   RESPONSIVE — HP KECIL (<=400px)
===================================== */

@media(max-width:400px){

    .questionBox{
        border-radius:12px;
    }

    button{
        flex:1 1 100%; /* di layar sangat sempit, tombol full-width ditumpuk vertikal biar mudah ditekan */
        max-width:none;
    }
}