#header {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
#header  .title1{
	font: bold 50px Arial;
	color:#776e65;
	margin:0 auto;
}

#header  .title2{
	font:normal 18px Arial;
	margin:10px auto;
	padding-left:20%;

}
#header  .wrapper{
	display:flex;
	justify-content:space-between;
	width:500px;
	margin:0 auto;
}
#header  .score-wrapper{
	width:100px;
	background-color:#8f7a66;
	padding:6px;
	border-radius:6px;
}
#header  .score-wrapper #txt{
	color:#d2c1c1;
}
#header  .score-wrapper #score{
	color:#fff;
	font-size:30px;
	vertical-align:middle;

}
#header  .newgame-wrapper #newGame{
	width:100px;
	display:block;
	background-color:#8f7a66;
	text-decoration:none;
	padding:13px;
	border-radius:6px;
	color:#fff;
	font:bold 15px Arial;

}
#header  .newgame-wrapper #newGame:hover{
	background-color:#bdac9c;
}
#grid-container{
	width:460px;
	height:460px;
	padding:20px;
	background-color:#bbada0;
	margin:10px auto;
	border-radius:10px;
	position:relative;
}
#grid-container .grid-cell{
	width:100px;
	height:100px;
	background-color:#ccc0b3;
	border-radius:6px;
	position:absolute;
}

#grid-container .number-cell{
	border-radius:6px;
	position:absolute;
	background-color:red;
	font:bold 50px Arial;
	text-align:center;
	line-height:100px;
}

/* pop layout */
/* pop layout */
/* 背景层 */
#popLayer,
#popConfirmLayer {
	display: none;
	background-color: #b3b3b3;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	opacity: 0.8;
	filter: alpha(opacity=80); /* 只支持IE6、7、8、9 */
}

/* 弹出层 */
#popBox {
	display: none;
	background-color: #FFFFFF;
	z-index: 11;
	width: 200px;
	height: 100px;
	position: absolute;
	top: 50%; /* Vertically center the pop-up box */
	left: 50%; /* Horizontally center the pop-up box */
	transform: translate(-50%, -50%); /* Center the box precisely */
	border-radius: 10px;
	padding: 10px;
}

#popConfirmBox {
	display: none;
	background-color: #FFFFFF;
	z-index: 11;
	width: 200px;
	height: 160px;
	position: absolute;
	top: 50%; /* Vertically center the pop-up box */
	left: 50%; /* Horizontally center the pop-up box */
	transform: translate(-50%, -50%); /* Center the box precisely */
	border-radius: 10px;
	padding: 10px;
}

#popBox .close,
#popConfirmBox .close {
	text-align: right;
	margin-right: 5px;
	background-color: #8f7a66; /* Match the background color of the header score wrapper */
	padding: 5px 10px; /* Add some padding to the close button */
	border-radius: 6px; /* Add rounded corners to the close button */
}

/* 关闭按钮 */
#popBox .close a,
#popConfirmBox .close a {
	text-decoration: none;
	color: #d2c1c1; /* Match the text color of the score text */
	font-weight: bold;
}

/* Style the text inside the pop-up box */
#popBox p,
#popConfirmBox p {
	font-size: 18px; /* Adjust the font size to match the .title2 in the header */
	font-family: Arial;
	color: #776e65; /* Match the color of .title1 in the header */
	margin-top: 20px; /* Add some space between the close button and the content */
}


.outer-container {
    width: 460px;
    margin: 10px auto;
}

/* Styles for desktop screens */
.buttons-container {
    width: 460px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 20px;
}

.buttons-container button {
    width: calc(33.33% - 10px);
    margin: 5px;
    padding: 10px 20px;
    background-color: #8f7a66;
    color: #fff;
    border: none;
    border-radius: 6px;
    font: bold 15px Arial;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.buttons-container button:hover {
    background-color: #bdac9c;
}

/* Styles for mobile screens */
@media (max-width: 767px) {
    .buttons-container {
        /* flex-wrap: wrap; */
		width:100%;
    }

    .buttons-container button {
        width: 30%;
    }
}



/*自定义常驻按钮*/
.self-button{
	
	width: auto;
    margin: 5px; /* Add some space between buttons */
    padding: 10px 20px; /* Add padding to buttons */
    background-color: #8f7a66; /* Match the background color of the header score wrapper */
    color: #fff;
    border: none;
    border-radius: 6px; /* Add rounded corners to buttons */
    font: bold 15px Arial;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.self-button p{
	font-size: 18px; /* Adjust the font size to match the .title2 in the header */
	font-family: Arial;
	color: white; /* Match the color of .title1 in the header */
	margin-top: 20px; /* Add some space between the close button and the content */
}

#popBox .self-button a,
#popConfirmBox .self-button a{
	color: white; /* Match the color of .title1 in the header */
	text-decoration: none;
}