@charset "UTF-8";

/* ====== 全体 ====== */
body {
	margin: 0;
	padding: 0;
	background: #000;
	color: #fff;
	font-family: "Times New Roman", serif;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

/* ====== ログインコンテナ ====== */
.login-container {
	text-align: center;
	width: 320px;
	transition: opacity 0.4s ease;
	z-index: 2;
}

.login-container.fade-out {
	opacity: 0;
}

/* ====== タイトル ====== */
.login-title {
	font-family: 'Yuji Syuku', serif;
	font-size: 28px;
	letter-spacing: 8px;
	color: #ccc;
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
	animation: fadeIn 3.0s ease forwards;
	opacity: 0;
}

/* ====== 入力ラッパー ====== */
.password-wrapper {
	position: relative;
	width: 100%;
}

/* ====== 入力欄 ====== */
.login-input {
	width: 100%;
	padding: 12px 40px 12px 12px;
	background: transparent;
	border: 1px solid #555;
	color: #fff;
	font-size: 16px;
	letter-spacing: 2px;
	box-sizing: border-box;
	height: 44px;
	transition: border 0.3s ease, box-shadow 0.3s ease;
}

.login-input:focus {
	outline: none;
	border-color: #fff;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ====== 目アイコン ====== */
.toggle-password {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #777;
	transition: color 0.3s ease;
}

.toggle-password:hover {
	color: #fff;
}

/* ====== エラー表示 ====== */
.login-error {
	margin-top: 10px;
	font-size: 13px;
	color: #ff4444;
	height: 18px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.login-error.show {
	opacity: 1;
}

/* ====== STARTボタン ====== */
.login-button {
	margin-top: 30px;
	width: 100%;
	padding: 12px;
	background: transparent;
	border: 1px solid #888;
	color: #fff;
	font-size: 16px;
	letter-spacing: 3px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.login-button:hover {
	border-color: #fff;
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.login-button:active {
	transform: scale(0.97);
}

/* ====== 暗転レイヤー ====== */
.dark-overlay {
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	z-index: 5;
}

.dark-overlay.active {
	animation: darkFade 0.4s ease forwards;
}

@keyframes darkFade {
	to {
		opacity: 1;
	}
}

/* ====== 光エフェクト ====== */
.flash-light {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, 0.95) 30%,
			rgba(255, 255, 255, 0.7) 60%,
			rgba(255, 255, 255, 0) 100%);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
}

.flash-light.active {
	animation: expandFlash 0.9s ease-out forwards;
}

@keyframes expandFlash {
	0% {
		width: 0;
		height: 0;
		opacity: 1;
	}

	100% {
		width: 200vmax;
		height: 200vmax;
		opacity: 1;
	}
}

/* ====== タイトルフェード ====== */
@keyframes fadeIn {
	to {
		opacity: 1;
	}
}