/*google font(Optional)*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#5d76ae;
    color:white;
    overflow:hidden;
    min-height:100vh;
}

#bg-gif{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}

.game-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background: rgba(15, 23, 42, 0.75);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding:20px;
    box-shadow:0 8px 25px rgba(0,0,0,.3);
    z-index:1000;
}

.game-header h1{

    text-align:center;
    font-size:2rem;
    margin-bottom:20px;

}


.stats{

    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:20px;

}

.card{

    background: rgba(51, 65, 85, 0.75);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
    min-width:160px;
    padding:15px;
    border-radius:15px;
    text-align:center;

}

.card h3{
    font-size:15px;
    color:#cbd5e1;
}

.card p{

    font-size:26px;
    margin-top:10px;
    font-weight:bold;

}



.roast-box{

    background: rgba(51, 65, 85, 0.75);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
    max-width:700px;
    margin:auto;
    padding:18px;
    border-radius:15px;
    text-align:center;

}

.roast-box p{

    font-size:20px;
    font-style:italic;

}


#catch-btn{

    position:fixed;
    left:50%;
    top:60%;
    transform:translate(-50%,-50%);
    border:none;
    outline:none;
    cursor:pointer;
    padding:18px 35px;
    font-size:20px;
    font-weight:bold;
    border-radius:15px;
    background:#ef4444;
    color:white;
    transition:.3s;
    z-index:999;

}

#catch-btn:hover{
    transform:translate(-50%,-50%) scale(1.08);
}



@media(max-width:700px){

.stats{
    flex-direction:column;
    align-items:center;

}

.card{
    width:220px;
}

.roast-box{
    width:90%;
}

}
.modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5000;
    padding: 20px;

}
.hidden {
    display: none;
}
.victory-content{
    width: 100%;
    max-width: 450px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
#victory-gif{
    width: 100%;
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
    margin: 15px 0;
}

.victory-roast{
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    margin: 20px 0;
}

.final-stats{
    margin-top: 15px;
    border-radius: 12px;
    padding: 25px;
    background: rgba(254, 203, 0, 0.581);
    
}

.final-stats p {
    margin: 8px 0;
    font-size: 17px;
}

#restart{
    margin-top: 20px;
    padding: 12px 25px;
    border: none;
    outline: none;
    border-radius: 10px;
    background: #ef4444;
    color: white;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

#restart:hover{
    transform: scale(1.05);
    background: #852424;
}