.info {
	margin: 20px auto;
	max-width: 600px;
	text-align: center;
}

.board {
	max-width: 600px;
	margin: 30px auto;
	user-select: none;
}

#main {
	position: relative;
	background:url('img/board.gif') #bca67c;
	border: 1px solid #bca67c;
	font-size: 12px;
}

#board {
	position: absolute;
	border-collapse: collapse;
}
#board tr{
	height:45px;
}
#board tr.outside{
	height:20px;
}
#board td{
	width:36px;
	padding:0px;
	margin:0px;
}
#board td.outside{
	width:20px;
	background:none;
}
#infoTop {
	height: 36px;
}
#timeLeft, #score, #topScore{
	font-weight:bolder;
}

/* Top score animation */
#topScore.new {
	animation-name: newtopscore;
	animation-duration: 0.8s;
	animation-iteration-count: 3;
	animation-timing-function: ease-in-out;
}

@keyframes newtopscore {
	0% {
		color: inherit;
		transform: scale(1);
	}
	25% {
		color: #ff6b6b;
		transform: scale(1.3);
	}
	50% {
		color: #4ecdc4;
		transform: scale(1.5);
	}
	75% {
		color: #45b7d1;
		transform: scale(1.2);
	}
	100% {
		color: #f9ca24;
		transform: scale(1.1);
	}
}
.screen {
	position:absolute;
	margin:20px;
	display:none;
	border:3px solid #bca67c;
	background:#fff;
	color: #333;
	text-align:center;
	line-height:16px;
	font-size:12px;
}
.topscreen {
	text-align:right;
	margin:4px 6px;
}
.btn {
	cursor:pointer;
}
#pauseText {
	margin:80px;
	font-size:18px;
	font-weight:bolder;
}

/* Added to mirror styling from mahjong.css */
.body {
	max-width: 660px; /* keep consistent width with original Mahjong page */
	margin: 0 auto;
	padding: 0 10px;
}
.rules {
	margin: 2em auto 3em auto;
	max-width: 600px;
}
.rules p {
	margin-bottom: 1em;
}
.rules ul {
	margin: 0 0 1.2em 1.2em;
	padding: 0;
	list-style: disc;
}
.rules li { margin: .3em 0; }
h2 {
	line-height: 2em;
	font-size: 130%;
	font-weight: normal;
}

/* Settings modal styles */
#settingsModal .settings-content {
	padding: 20px;
}

#settingsModal h3 {
	margin: 10px 0 20px 0;
	color: #333;
	font-size: 20px;
	font-weight: bold;
}

#settingsModal .setting-item {
	margin: 15px 0;
}

#settingsModal .setting-item button {
	background-color: #DC2626;
	color: white;
	border: none;
	padding: 10px 18px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	transition: background-color 0.2s;
}

#settingsModal .setting-item button:hover {
	background-color: #B91C1C;
}

#settingsModal .setting-item button:active {
	background-color: #991B1B;
}

#settingsModal .settings-close {
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid #ddd;
}

#settingsModal .settings-close button {
	background-color: #6B7280;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
	transition: background-color 0.2s;
}

#settingsModal .settings-close button:hover {
	background-color: #4B5563;
}

#settingsModal .settings-close button:active {
	background-color: #374151;
}