/* ============================================================
   "Gate" theme — used ONLY by login.php, signup.php, recover.php.
   Deliberately generic/unbranded: no logo, no site name, no
   colour scheme shared with the rest of the site. Looks like a
   plain restricted-access system, not a game tracker.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0; padding: 0;
	min-height: 100%;
	background: #0a0a0b;
	color: #c7c7cc;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

body.gate-body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 32px 16px;
	background:
		radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,255,255,0.035), transparent 60%),
		#0a0a0b;
}

.gate-wrap {
	width: 100%;
	max-width: 380px;
}

.gate-mark {
	width: 34px; height: 34px;
	margin: 0 auto 22px;
	border: 1px solid #3a3a40;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
.gate-mark::after {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #6b7280;
}

.gate-card {
	background: #101012;
	border: 1px solid #232328;
	border-radius: 5px;
	padding: 32px 30px;
	position: relative;
	overflow: visible;
}

.gate-title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	color: #e8e8ea;
	text-align: center;
	letter-spacing: .2px;
}

.gate-sub {
	margin: 0 0 26px;
	font-size: 13px;
	color: #6b6b72;
	text-align: center;
	letter-spacing: .3px;
}

.gate-field { margin-bottom: 16px; }
.gate-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #85858c;
	text-transform: uppercase;
	letter-spacing: .6px;
}
.gate-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gate-row a { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }

.gate-passwords { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .gate-passwords { grid-template-columns: 1fr; } }

.gate-field input,
.gate-field select {
	display: block;
	width: 100%;
	background: #0a0a0b;
	border: 1px solid #2b2b31;
	border-radius: 4px;
	color: #e4e4e6;
	padding: 10px 12px;
	font-size: 14.5px;
	font-family: inherit;
}
.gate-field input:focus,
.gate-field select:focus {
	outline: none;
	border-color: #55555e;
	box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}

.gate-hint { margin: 6px 0 0; font-size: 12px; color: #5c5c63; line-height: 1.5; }
.gate-note { margin: 0 0 18px; font-size: 12px; color: #5c5c63; text-align: center; }

.gate-submit {
	display: block;
	width: 100%;
	background: #202024;
	border: 1px solid #34343a;
	border-radius: 4px;
	color: #e8e8ea;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .3px;
	padding: 11px;
	cursor: pointer;
	transition: background .12s, border-color .12s;
}
.gate-submit:hover { background: #26262b; border-color: #45454d; }
.gate-submit:active { background: #1a1a1d; }

.gate-links {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid #1e1e22;
	text-align: center;
	font-size: 12.5px;
	color: #5c5c63;
}

.gate-wrap a { color: #9a9aa2; text-decoration: none; border-bottom: 1px solid #3a3a40; }
.gate-wrap a:hover { color: #d0d0d4; border-bottom-color: #6b6b72; }

.gate-alert {
	padding: 10px 13px;
	margin-bottom: 18px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.5;
	border: 1px solid #2b2b31;
	background: #16161a;
	color: #9a9aa2;
	overflow-wrap: anywhere;
}
.gate-alert-err { border-color: rgba(220,38,38,.35); color: #e58b8b; }
.gate-alert-ok  { border-color: rgba(74,158,107,.35); color: #7fbf98; }

.gate-card .g-recaptcha { margin-bottom: 16px; display: flex; justify-content: center; }

.gate-foot {
	margin: 22px auto 0;
	text-align: center;
	font-size: 11px;
	letter-spacing: 1.5px;
	color: #38383d;
	text-transform: uppercase;
}

/* Small easter egg, login page only — perched right on the corner of the card. */
.gate-cat {
	position: absolute;
	top: -46px;
	right: 6px;
	width: 62px;
	height: auto;
	opacity: .92;
	transform: rotate(0deg);
	transition: transform .3s ease, opacity .2s ease;
	pointer-events: auto;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.gate-cat:hover {
	transform: rotate(-6deg) scale(1.06);
}