html, body {
	--safe-area-top: env(safe-area-inset-top, 0px);
	--safe-area-right: env(safe-area-inset-right, 0px);
	--safe-area-bottom: env(safe-area-inset-bottom, 0px);
	--safe-area-left: env(safe-area-inset-left, 0px);
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: #071923;
}

body {
	position: relative;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	font-family: system-ui, sans-serif;
	color: #d8f2ef;
}

#gameCanvas {
	display: block;
	width: 100%;
	height: 100%;
}

.login-panel {
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding:
		max(24px, var(--safe-area-top))
		max(24px, var(--safe-area-right))
		max(24px, var(--safe-area-bottom))
		max(24px, var(--safe-area-left));
	background: linear-gradient(180deg, rgba(4,18,26,.88), rgba(8,42,53,.94));
}

.login-panel[hidden] { display: none; }

.login-card {
	box-sizing: border-box;
	width: min(100%, 360px);
	padding: 28px 24px;
	border: 1px solid rgba(154,225,218,.35);
	border-radius: 18px;
	background: rgba(7,25,35,.96);
	box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.login-card p { margin: 0 0 8px; color: #78b9bd; font-size: 13px; letter-spacing: .12em; }
.login-card h1 { margin: 0 0 22px; font-size: 26px; }
.login-card > label { display: block; margin-bottom: 8px; font-size: 14px; }

.login-card input {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #316978;
	border-radius: 10px;
	outline: none;
	background: #0b2733;
	color: #eefcf9;
	font: inherit;
	user-select: text;
	-webkit-user-select: text;
}

.login-card input:focus { border-color: #77d4ca; box-shadow: 0 0 0 3px rgba(119,212,202,.14); }
.login-card > button { width: 100%; height: 48px; margin-top: 14px; border: 0; border-radius: 10px; background: #48b7ac; color: #04161d; font: 700 16px system-ui, sans-serif; }
.login-card > button:disabled { opacity: .45; }
.privacy-consent {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	margin-top: 8px;
	font-size: 13px;
	color: #b9d5d2;
}
.privacy-consent input {
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	accent-color: #48b7ac;
}
.privacy-consent label { cursor: pointer; }
.privacy-link {
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #7bd4ca;
	font: 700 13px system-ui, sans-serif;
	text-decoration: underline;
	cursor: pointer;
}
.privacy-dialog {
	box-sizing: border-box;
	width: min(calc(100% - 40px), 350px);
	max-height: min(680px, calc(100% - 40px));
	padding: 24px;
	border: 1px solid #4b8e94;
	border-radius: 18px;
	background: #092631;
	color: #d8f2ef;
}
.privacy-dialog::backdrop { background: rgba(2, 10, 15, .82); }
.privacy-dialog h2 { margin: 0 0 18px; font-size: 22px; }
.privacy-dialog p { margin: 0 0 14px; color: #b6d0ce; font-size: 13px; line-height: 1.65; }
.privacy-dialog button {
	width: 100%;
	height: 48px;
	margin-top: 8px;
	border: 0;
	border-radius: 10px;
	background: #48b7ac;
	color: #04161d;
	font: 700 15px system-ui, sans-serif;
}
#loginStatus { min-height: 20px; margin: 12px 0 0; color: #efc278; letter-spacing: 0; }
.login-note { margin-top: 16px !important; color: #78949a !important; letter-spacing: 0 !important; line-height: 1.5; }