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

body{

    background:#eef4f9;

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

    color:#374151;

}

.game-container{

    width:1200px;

    max-width:95%;

    margin:40px auto;

    background:#fff;

    border-radius:25px;

    padding:35px;

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

}

header{

    text-align:center;

}

header h1{

    font-size:42px;

    font-weight:800;

    color:#1f2937;

}

.subtitle{

    margin-top:10px;

    color:#6b7280;

}

.top-bar{

    display:flex;

    justify-content:space-between;

    margin-top:35px;

    gap:20px;

}

.top-bar div{

    flex:1;

    padding:18px;

    border-radius:18px;

    color:white;

    font-size:22px;

    font-weight:700;

}

.round-box{

    background:#3b82f6;

}

.timer-box{

    background:#ef4444;

}

.score-box{

    background:#22c55e;

}

.progress-wrapper{

    margin:30px 0;

}

.progress-bar{

    width:100%;

    height:15px;

    background:#e5e7eb;

    border-radius:30px;

    overflow:hidden;

}

#progressFill{

    width:0%;

    height:100%;

    background:linear-gradient(90deg,#22c55e,#10b981);

    transition:.4s;

}

.instruction{

    text-align:center;

    margin-bottom:25px;

    font-size:20px;

}

.drop-wrapper{

    display:grid;

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

    gap:25px;

}

.drop-zone{

    border:3px dashed #cbd5e1;

    border-radius:20px;

    min-height:280px;

    padding:20px;

    transition:.3s;

}

.drop-zone h2{

    text-align:center;

    margin-bottom:20px;

}

.social-zone{

    background:#f0fdf4;

}

.green-zone{

    background:#fffbeb;

}

.red-zone{

    background:#fef2f2;

}

.drop-zone.drag-over{

    transform:scale(1.02);

    border-color:#2563eb;

}

.drop-area{

    min-height:180px;

}

.cards-title{

    margin:40px 0 20px;

}

.cards-container{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.card{

    width:250px;

    background:white;

    border-radius:15px;

    padding:18px;

    border:2px solid #d1d5db;

    cursor:grab;

    transition:.25s;

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.card:hover{

    transform:translateY(-5px);

}

.card.dragging{

    opacity:.4;

}

.correct{

    border:2px solid #22c55e!important;

    background:#dcfce7!important;

}

.wrong{

    border:2px solid #ef4444!important;

    background:#fee2e2!important;

}

.buttons{

    margin-top:40px;

    text-align:center;

}

button{

    border:none;

    border-radius:15px;

    padding:18px 35px;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    margin:0 10px;

    transition:.25s;

}

#checkBtn{

    background:#2563eb;

    color:white;

}

#nextBtn{

    background:#22c55e;

    color:white;

}

button:hover{

    transform:translateY(-3px);

}

#resultBox{

    margin-top:35px;

    text-align:center;

    font-size:26px;

    font-weight:700;

}

@media(max-width:900px){

    .drop-wrapper{

        grid-template-columns:1fr;

    }

    .top-bar{

        flex-direction:column;

    }

    .card{

        width:100%;

    }

}