/*
================================
 AI Enhanced Minesweeper
 Classic Windows Style CSS
================================
*/


/* 页面背景 */

body{

    margin:0;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#008080;

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

}



/*
=========================
 游戏主窗口
=========================
*/


.game-window{


    background:#c0c0c0;


    padding:10px;


    border-style:solid;


    border-width:5px;


    border-color:

            #ffffff

            #808080

            #808080

            #ffffff;


    box-shadow:
            3px 3px 0 #000;


}





/*
=========================
 标题栏
=========================
*/


.title-bar{


    background:#000080;


    color:white;


    height:28px;


    line-height:28px;


    font-weight:bold;


    padding-left:8px;


    margin-bottom:8px;


}





/*
=========================
 菜单区域
=========================
*/


.menu-panel{


    display:flex;


    gap:5px;


    margin-bottom:8px;


}



button{


    background:#c0c0c0;


    border-width:3px;


    border-style:outset;


    padding:

            4px 12px;


    font-size:14px;


    cursor:pointer;


}



button:active{


    border-style:inset;


}





/*
=========================
 顶部状态栏
=========================
*/


.top-panel{


    height:65px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:5px;


    margin-bottom:10px;



    border-width:4px;


    border-style:inset;


}





/*
=========================
 LED数字显示
=========================
*/


.counter-box{


    background:black;


    padding:3px;


}



#mineCounter,

#timer{


    width:70px;


    height:45px;


    line-height:45px;


    text-align:center;


    color:red;


    font-family:

            "Courier New";


    font-size:38px;


    font-weight:bold;


    letter-spacing:2px;


}






/*
=========================
 笑脸按钮
=========================
*/


#faceButton{


    width:50px;


    height:50px;


    font-size:30px;


    padding:0;


}






/*
=========================
 棋盘
=========================
*/


#board{


    display:grid;


    border-width:5px;


    border-style:inset;


    background:#808080;


}







/*
=========================
 扫雷方块
=========================
*/


.cell{


    width:32px;


    height:32px;


    display:flex;


    justify-content:center;


    align-items:center;


    box-sizing:border-box;


    background:#c0c0c0;


    border-width:3px;


    border-style:outset;


    font-size:20px;


    font-weight:bold;


    user-select:none;


}




/*
打开状态
*/


.cell.open{


    border:

            1px solid #808080;


    background:#c0c0c0;


}





/*
旗帜
*/


.cell.flag{


    color:red;


}





/*
地雷

*/


.cell.mine{


    background:red;


}








/*
=========================
 控制区域
=========================
*/


.control-panel{


    margin-top:10px;


    padding:8px;


    border:

            3px inset #808080;


    font-size:15px;


}






/*
=========================
 AI状态显示
=========================
*/


.ai-panel{


    margin-top:10px;


    padding:8px;


    border:

            3px inset #808080;


    background:#c0c0c0;


    font-size:14px;


}



.ai-panel span{


    color:#000080;


    font-weight:bold;


}





/*
=========================
 数字颜色
=========================
*/


.number-1{

    color:blue;

}


.number-2{

    color:green;

}


.number-3{

    color:red;

}


.number-4{

    color:#000080;

}


.number-5{

    color:brown;

}


.number-6{

    color:#008080;

}


.number-7{

    color:black;

}


.number-8{

    color:#666;

}







/*
=========================
 中级模式
16×16
=========================
*/


.medium .cell{


    width:28px;

    height:28px;


}







/*
=========================
 专家模式
30×16
=========================
*/


.hard .cell{


    width:24px;


    height:24px;


    font-size:16px;


}







/*
=========================
 自定义大地图滚动
=========================
*/


.custom-board{


    max-width:900px;


    max-height:600px;


    overflow:auto;


}







/*
=========================
 游戏结束动画接口
=========================
*/


.win{


    animation:

            winFlash 0.5s infinite alternate;


}




@keyframes winFlash{


    from{


        transform:scale(1);


    }


    to{


        transform:scale(1.05);


    }


}