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

body{
background:#eef2f7;
font-family:Segoe UI,sans-serif;
padding:20px;
}

.title{
text-align:center;
color:#0077c8;
margin-bottom:20px;
}

.game-container{
    display:grid;
    grid-template-columns:300px 900px 300px;
    justify-content:center;
    gap:20px;
}

.player-panel{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.panel-header{
padding:18px;
color:white;
font-size:24px;
font-weight:bold;


display:flex;
justify-content:space-between;
align-items:center;


}

.blue{
background:#1e88e5;
}

.red{
background:#e53935;
}

.score-circle{
width:45px;
height:45px;
border-radius:50%;
background:white;
color:black;


display:flex;
justify-content:center;
align-items:center;

font-weight:bold;


}

.question-box{
padding:30px;
text-align:center;
font-size:34px;
font-weight:bold;
}

.blue-question{
background:#e3f2fd;
color:#1e88e5;
}

.red-question{
background:#ffebee;
color:#e53935;
}

.answers{
padding:20px;
}

.answer-btn{
width:100%;
padding:15px;
margin-bottom:12px;


border:none;
border-radius:12px;

font-size:18px;
cursor:pointer;

background:#f5f5f5;

transition:.2s;


}

.answer-btn:hover{
    background:#e0e0e0;
}

.arena{
    background:white;
    border-radius:20px;
    padding:20px;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.scoreboard{
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#f5f5f5;
    padding:20px;
    border-radius:15px;

    font-size:20px;
    font-weight:bold;
}

.score-number{
    font-size:36px;
    color:#0077c8;
}

.timer{
font-size:28px;
color:#0077c8;
}

.battlefield{
    background:#fff;
    border-radius:20px;
    height:500px;

    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.center-line{
    position:absolute;

    left:50%;
    top:20px;
    bottom:20px;

    width:0;

    border-left:4px dashed #666;

    transform:translateX(-50%);

    z-index:100;
    pointer-events:none;
}

#tugContainer{
    position:relative;
    z-index:1;

    transition:0.4s ease;
}

.tug-image{
    width:200%;
    max-width:600px;
    height:auto;
    transform:scale(1.25);
}

@media(max-width:1200px){


.game-container{
    display:grid;
    grid-template-columns:280px 1fr 280px;
    gap:20px;
    max-width:1600px;
    margin:auto;
}


}