/*
 * The landing page (templates/worlds.php, layout_start.php) after
 * the original's start page: the logo on its banner, two parchment
 * boxes, the red register button, the small world buttons.
 */
body.start-page { background: var(--bg); margin: 0; }
.start-wrap { width: 800px; max-width: 100%; margin: 0 auto 20px; }
.start-logo {
	background: url("../img/start/logo_bg.webp") 50% / 100% no-repeat;
	height: 115px; text-align: center;
}
.start-logo img { height: 82px; margin-top: 8px; }
.start-flash { margin: 8px 20px; }
.start-boxes { display: flex; gap: 14px; margin: 6px 12px 0; }
.start-box {
	background: var(--paper2); border: 3px double var(--edge-dark);
	border-radius: 4px; padding: 14px 20px 18px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.start-left { flex: 0 0 60%; }
.start-right { flex: 1 1 auto; }
.start-box h2 { margin: 0 0 12px; font-size: 18px; color: var(--dark); }
.start-box h3 { margin: 16px 0 8px; font-size: 13px; }
.start-box h4 { margin: 14px 0 6px; font-size: 12px; }
.start-btn {
	display: inline-block; text-decoration: none; font-weight: bold;
	border-radius: 3px; text-align: center;
}
.start-btn.red {
	display: block; margin: 12px 0; padding: 8px 14px;
	font-size: 18px; color: #fff; text-shadow: 1px 1px 0 #000;
	background: linear-gradient(#d23a2a, #9c1d13);
	border: 1px solid #5a0f08;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.start-btn.red:hover { background: linear-gradient(#e04a3a, #ad2618); color: #fff; }
.start-btn.small {
	margin: 0 6px 6px 0; padding: 4px 12px; font-size: 12px;
	color: var(--brown); background: linear-gradient(#f7eed3, #dfcca6);
	border: 1px solid var(--edge-dark);
	box-shadow: inset 0 1px 0 #fff;
}
.start-btn.small:hover { background: linear-gradient(#fff8e0, #e8d8b0); text-decoration: none; }
.start-thumbs { display: flex; gap: 22px; }
.start-thumbs img {
	width: 80px; height: 60px; border: 3px solid var(--edge-dark);
	border-radius: 2px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
}
.start-login th { text-align: left; padding: 3px 8px 3px 0; }
.start-login td { padding: 3px 0; }
.start-login input[type=text], .start-login input[type=password] { width: 150px; }
.start-table { display: none; margin: 14px 12px 0; }
.start-links { text-align: center; margin: 14px 0; }
@media (max-width: 700px) {
	.start-boxes { flex-direction: column; }
	.start-left { flex: 1 1 auto; }
}