html, body
{
	margin:0;
	padding:0;
	overflow:hidden;
	background:#0d1f38;
}

#die,#startgame,#pause
{
	cursor:default;
	position:absolute;
	width:420px;
	min-height:260px;
	padding:14px 0 20px;
	background:rgba(24,71,153,0.82);
	text-align:center;
	font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
	font-size:34px;
	color:#eef;
	box-shadow:0 16px 40px rgba(6,20,47,0.35);
	border:1px solid rgba(255,255,255,0.65);
	border-radius:18px;
	backdrop-filter:blur(8px);
}

#instructions,#about,#score,#ranking,#settingsbutton,#fullscreenbutton,#scorereset
{
	font-size:30px;
	margin-top:12px;
}

.title
{
	border-bottom:2px solid #430fc8;
	position:absolute;
	height:auto;
	font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
	font-size:50px;
	font-weight:bold;
	color:#430fc8;
}

.moreinfo
{
	position:absolute;
	font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
	font-size:18px;
	min-height:220px;
	background:rgba(25,84,192,0.78);
	padding:12px 16px;
	text-align:left;
	color:#eef;
	box-shadow:0 16px 40px rgba(6,20,47,0.25);
	border:1px solid rgba(255,255,255,0.65);
	border-radius:16px;
	display:none;
}

.info
{
	position:absolute;
	text-align:center;
	font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
	font-size:18px;
	width:200px;
	height:100px;
	color:#3369cd;
}

.button
{
	cursor:pointer;
	width:80%;
	margin:11px auto 0;
	padding:8px 12px;
	background:rgba(34,34,119,0.76);
	border:1px solid rgba(255,255,255,0.25);
	border-radius:12px;
	transition:background 0.2s ease, transform 0.2s ease;
}

.button:hover
{
	background:rgba(53,53,160,0.88);
	transform:translateY(-1px);
}

.right2
{
	margin-top:5px;
	font-size:22px;
	margin-left:20px;
}

#settingspanel
{
	position:absolute;
	width:300px;
	padding:16px;
	background:rgba(12,34,70,0.88);
	color:#eef;
	border:1px solid rgba(255,255,255,0.65);
	border-radius:16px;
	box-shadow:0 18px 48px rgba(5,13,33,0.35);
	font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
	display:none;
}

.settings-title
{
	font-size:28px;
	margin-bottom:10px;
	text-align:center;
}

.settings-row
{
	margin-top:12px;
}

.settings-label
{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:16px;
	margin-bottom:6px;
}

.settings-label span:last-child
{
	color:#b9d8ff;
	font-size:14px;
}

.settings-range
{
	width:100%;
}

.settings-toggle
{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:16px;
}

.settings-actions
{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-top:14px;
}

.settings-button
{
	cursor:pointer;
	border:1px solid rgba(255,255,255,0.25);
	border-radius:10px;
	padding:8px 10px;
	background:rgba(53,93,165,0.62);
	text-align:center;
	font-size:15px;
}

.settings-button:hover
{
	background:rgba(75,118,196,0.75);
}

.settings-note
{
	margin-top:12px;
	font-size:13px;
	line-height:1.35;
	color:#c5dbff;
}

#pausemessage
{
	margin-top:10px;
	font-size:16px;
	color:#d8e8ff;
}