*{
    box-sizing:border-box;
}


body{

    margin:0;

    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        #f5f7fa,
        #e8ecf3
    );


    font-family:
    "Microsoft YaHei",
    Arial,
    sans-serif;


    display:flex;

    justify-content:center;

    align-items:flex-start;

}


.container{

    width:100%;

    max-width:700px;

    padding:20px;

    text-align:center;

}



h1{

    margin:10px 0;

    font-size:34px;

    color:#222;

}



.desc{

    color:#666;

    margin-bottom:20px;

}




.panel{

    background:white;

    border-radius:20px;

    padding:18px;

    box-shadow:

    0 8px 25px rgba(0,0,0,.12);


    margin-bottom:20px;

}



.setting{

    font-size:18px;

}



select{

    margin-left:8px;

    padding:8px 18px;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:16px;

}



#status{

    margin-top:15px;

    font-size:22px;

    font-weight:bold;

    color:#333;

}



.score{

    margin-top:12px;

    color:#666;

    font-size:16px;

}




.game-area{

    display:flex;

    flex-direction:column;

    align-items:center;

}





canvas{

    display:block;


    width:100%;


    max-width:600px;


    aspect-ratio:1;


    background:#deb36a;


    border-radius:15px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.18);


}



button{


    margin-top:20px;


    padding:13px 45px;


    border:none;


    border-radius:30px;


    background:#222;


    color:white;


    font-size:18px;


    cursor:pointer;


    transition:.2s;


}



button:hover{


    transform:scale(1.05);


}





/*
====================
结算弹窗
====================
*/


.hidden{

    display:none!important;

}



#result{


    position:fixed;


    inset:0;


    background:
    rgba(0,0,0,.45);


    display:flex;


    justify-content:center;


    align-items:center;


    z-index:99;


}



.result-box{


    width:300px;


    background:white;


    padding:35px;


    border-radius:25px;


    text-align:center;


    animation:

    popup .3s ease;


    box-shadow:

    0 15px 40px rgba(0,0,0,.3);


}



.result-box h2{


    font-size:26px;


    margin:0;


}




@keyframes popup{


    from{

        transform:scale(.7);

        opacity:0;

    }


    to{

        transform:scale(1);

        opacity:1;

    }


}




/*
手机优化
*/


@media(max-width:600px){


    .container{

        padding:12px;

    }


    h1{

        font-size:28px;

    }


    .panel{

        padding:14px;

    }


    #status{

        font-size:20px;

    }


    button{

        width:80%;

    }


}