* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { height: 100%; width: 100%; font-family: 'Gotham', sans-serif; background:#fff; overflow:hidden; }

/* Gotham font */
@font-face {
	font-family: 'Gotham';
	src: url('../fonts/Gotham-Light.otf') format('opentype');
	font-weight: 300;
}
@font-face {
	font-family: 'Gotham';
	src: url('../fonts/Gotham-Regular.otf') format('opentype');
	font-weight: 400;
}
@font-face {
	font-family: 'Gotham';
	src: url('../fonts/Gotham-Bold.otf') format('opentype');
	font-weight: 700;
}

a {
	text-decoration: none;
}

/* Loading Screen */
.loading-screen {
	position: fixed; top:0; left:0; height:100%; width:100%;
	background:#fff; display:flex; flex-direction:column;
	justify-content:center; align-items:center; z-index:9999;
	font-family: 'Gotham', sans-serif;
}
.coin-wrapper { position: relative; width: 200px; height: 200px; margin-bottom: 30px; }
.coin-wrapper img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: auto; z-index: 2; }
.coin-circle { width: 100%; height: 100%; transform: rotate(-90deg); }
.coin-circle circle {
	fill: none; stroke: #13e7d9; stroke-width: 8; stroke-linecap: round;
	stroke-dasharray: 565; stroke-dashoffset: 565; animation: drawCircle 2.4s ease forwards;
}
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
.loading-text { font-weight: 300; font-size: 14px; color: #444; margin-bottom: 30px; min-height: 20px; }
.powered { position:absolute; bottom:20px; display:flex; align-items:center; font-size:9px; font-weight:300; color:#000; }
.powered span { margin-right:6px; letter-spacing:1px; }
.powered img { height:30px; }

/* Landing Page */
.landing {
	display:none; height:100vh; width:100%;
	background: radial-gradient(circle at 20% 20%, rgba(19,231,217,0.15) 0%, transparent 60%),
				radial-gradient(circle at 80% 80%, rgba(0,254,254,0.1) 0%, transparent 55%),
				linear-gradient(135deg, #010a1f, #001a33 40%, #002d4d 75%, #081b3a);
	color:white; display:flex; flex-direction:column;
	position:relative; overflow:hidden;
	font-family:'Gotham', sans-serif;
}
header { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; z-index:2;}
header img.logo { height:40px; }
.login-btn {
	background:none; border:1px solid #13e7d9; color:#13e7d9;
	padding:8px 18px; border-radius:20px; font-size:14px; cursor:pointer;
	font-weight:300; transition:all 0.3s ease; font-family:'Gotham', sans-serif;
	text-decoration: none;
}
.login-btn:hover { background:#13e7d9; color:#001a33; }
.content {
	flex:1; display:flex; align-items:center; justify-content:center;
	padding:40px; flex-direction:column; text-align:center; z-index:1; position:relative;
	transform: translateY(-8%); /* shift upwards */
}
.content h1 { font-size:3rem; margin-bottom:20px; font-weight:700; line-height:1.2; font-family:'Gotham', sans-serif; }
.content p { font-size:1.2rem; margin-bottom:30px; opacity:0.9; font-family:'Gotham', sans-serif; }
.cta {
	background:#13e7d9; color:#001a33; border:none; padding:16px 34px;
	font-size:1.1rem; border-radius:30px; cursor:pointer; font-weight:700;
	font-family:'Gotham', sans-serif;
	box-shadow:0 0 12px rgba(19,231,217,0.6), 0 0 24px rgba(0,254,254,0.4);
	transition:all 0.3s ease;
}
.cta:hover { background:#00fefe; box-shadow:0 0 20px rgba(0,254,254,0.8), 0 0 40px rgba(19,231,217,0.6); }
.landing .powered {
	position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
	display:flex; align-items:center; font-size:10px; font-weight:300; color:rgba(255,255,255,0.9);
}
.landing .powered img { height:44px; margin-left:6px; transform:translate(-6px,9px); }

/* Floating subtle icons */
.icon {
	position: absolute;
	stroke: white; stroke-width: 1.2; fill: transparent;
	opacity: 0;
	filter: drop-shadow(0 0 8px rgba(19,231,217,0.9)) drop-shadow(0 0 14px rgba(0,254,254,0.7));
	animation: popIn 0.7s ease forwards;
}
@keyframes popIn {
	0% { transform: scale(0.4); opacity: 0; }
	60% { transform: scale(1.2); opacity: 0.12; }
	100% { transform: scale(1); opacity: 0.08; }
}

/* Desktop adjustments: more icons density */
@media (min-width: 1024px) {
	.icon { stroke-width: 1.1; }
}

/* Login Modal */
.login-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(1, 10, 31, 0);
	backdrop-filter: blur(0px);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	font-family: 'Gotham', sans-serif;
	display: flex;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-modal.active {
	opacity: 1;
	visibility: visible;
	background: rgba(1, 10, 31, 0.95);
	backdrop-filter: blur(10px);
}

.login-container {
	background: linear-gradient(135deg, #001a33, #002d4d);
	border: 1px solid rgba(19, 231, 217, 0.3);
	border-radius: 20px;
	padding: 40px;
	width: 90%;
	max-width: 400px;
	position: relative;
	box-shadow: 0 0 50px rgba(19, 231, 217, 0.2);
	transform: scale(0.8) translateY(20px);
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	transition-delay: 0.1s;
}

.login-modal.active .login-container {
	transform: scale(1) translateY(0);
	opacity: 1;
}

.login-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.login-header .logo {
	height: 35px;
	transform: translateX(-10px);
	opacity: 0;
	transition: all 0.3s ease 0.2s;
}

.login-modal.active .login-header .logo {
	transform: translateX(0);
	opacity: 1;
}

.close-login {
	background: none;
	border: none;
	color: #13e7d9;
	font-size: 28px;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s ease;
	transform: scale(0.8);
	opacity: 0;
	transition: all 0.3s ease 0.2s;
}

.login-modal.active .close-login {
	transform: scale(1);
	opacity: 1;
}

.close-login:hover {
	background: rgba(19, 231, 217, 0.1);
	transform: scale(1.1);
}

.login-content h2 {
	color: white;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 10px;
	text-align: center;
	transform: translateY(10px);
	opacity: 0;
	transition: all 0.4s ease 0.15s;
}

.login-modal.active .login-content h2 {
	transform: translateY(0);
	opacity: 1;
}

.login-content p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 1rem;
	margin-bottom: 30px;
	text-align: center;
	font-weight: 300;
	transform: translateY(10px);
	opacity: 0;
	transition: all 0.4s ease 0.2s;
}

.login-modal.active .login-content p {
	transform: translateY(0);
	opacity: 1;
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.input-group {
	display: flex;
	flex-direction: column;
}

.input-group label {
	color: white;
	font-size: 0.9rem;
	font-weight: 400;
	margin-bottom: 8px;
	transform: translateX(-5px);
	opacity: 0;
	transition: all 0.3s ease;
}

.login-modal.active .input-group label {
	transform: translateX(0);
	opacity: 1;
}

.input-group:nth-child(1) label {
	transition-delay: 0.25s;
}

.input-group:nth-child(2) label {
	transition-delay: 0.3s;
}

.input-group input {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(19, 231, 217, 0.3);
	border-radius: 10px;
	padding: 12px 16px;
	color: white;
	font-size: 1rem;
	font-family: 'Gotham', sans-serif;
	transition: all 0.3s ease;
	transform: translateY(10px);
	opacity: 0;
}

.login-modal.active .input-group input {
	transform: translateY(0);
	opacity: 1;
}

.input-group:nth-child(1) input {
	transition: all 0.4s ease 0.3s, border-color 0.3s ease, background 0.3s ease;
}

.input-group:nth-child(2) input {
	transition: all 0.4s ease 0.35s, border-color 0.3s ease, background 0.3s ease;
}

.input-group input:focus {
	outline: none;
	border-color: #13e7d9;
	background: rgba(255, 255, 255, 0.15);
	box-shadow: 0 0 10px rgba(19, 231, 217, 0.3);
}

.input-group input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.login-submit-btn {
	background: #13e7d9;
	color: #001a33;
	border: none;
	padding: 14px;
	font-size: 1rem;
	border-radius: 25px;
	cursor: pointer;
	font-weight: 700;
	font-family: 'Gotham', sans-serif;
	margin-top: 10px;
	transition: all 0.3s ease;
	box-shadow: 0 0 12px rgba(19, 231, 217, 0.6);
	transform: translateY(10px);
	opacity: 0;
}

.login-modal.active .login-submit-btn {
	transform: translateY(0);
	opacity: 1;
	transition: all 0.4s ease 0.4s, background 0.3s ease, transform 0.3s ease;
}

.login-submit-btn:hover {
	background: #00fefe;
	box-shadow: 0 0 20px rgba(0, 254, 254, 0.8);
	transform: translateY(-2px);
}

.login-footer {
	text-align: center;
	margin-top: 20px;
	transform: translateY(10px);
	opacity: 0;
	transition: all 0.4s ease;
}

.login-modal.active .login-footer {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 0.45s;
}

.forgot-password {
	color: #13e7d9;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 300;
	transition: all 0.3s ease;
}

.forgot-password:hover {
	color: #00fefe;
	text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 480px) {
	.login-container {
		padding: 30px 20px;
		margin: 20px;
	}
	
	.login-content h2 {
		font-size: 1.5rem;
	}
}

/* Registration Modal Specific Styles */
.name-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.age-warning {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.75rem;
	margin-top: 5px;
	display: block;
	font-weight: 300;
}

.login-footer p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
	margin: 0;
}

.switch-to-login {
	color: #13e7d9;
	text-decoration: none;
	font-weight: 400;
	transition: all 0.3s ease;
}

.switch-to-login:hover {
	color: #00fefe;
	text-decoration: underline;
}

/* Scrollable modal container */
.login-container.scrollable {
	max-height: 85vh;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Custom scrollbar for modal */
.login-container.scrollable::-webkit-scrollbar {
	width: 6px;
}

.login-container.scrollable::-webkit-scrollbar-track {
	background: rgba(19, 231, 217, 0.1);
	border-radius: 3px;
	margin: 10px 0;
}

.login-container.scrollable::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #13e7d9, #00fefe);
	border-radius: 3px;
	transition: all 0.3s ease;
}

.login-container.scrollable::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #00fefe, #13e7d9);
	box-shadow: 0 0 8px rgba(0, 254, 254, 0.6);
}

/* Firefox scrollbar */
.login-container.scrollable {
	scrollbar-width: thin;
	scrollbar-color: #13e7d9 rgba(19, 231, 217, 0.1);
}

/* Modal content adjustments for scrollable */
.login-container.scrollable .login-content {
	min-height: min-content;
}

/* Ensure modal stays centered when scrollable */
.login-modal.active .login-container.scrollable {
	transform: scale(1) translateY(0);
	opacity: 1;
	margin: auto;
}

/* Name group animations */
.name-group .input-group label {
	transform: translateX(-5px);
	opacity: 0;
	transition: all 0.3s ease;
}

#registerModal.active .name-group .input-group label {
	transform: translateX(0);
	opacity: 1;
}

.name-group .input-group:nth-child(1) label {
	transition-delay: 0.25s;
}

.name-group .input-group:nth-child(2) label {
	transition-delay: 0.28s;
}

.name-group .input-group input {
	transform: translateY(10px);
	opacity: 0;
}

#registerModal.active .name-group .input-group input {
	transform: translateY(0);
	opacity: 1;
}

.name-group .input-group:nth-child(1) input {
	transition: all 0.4s ease 0.3s, border-color 0.3s ease, background 0.3s ease;
}

.name-group .input-group:nth-child(2) input {
	transition: all 0.4s ease 0.33s, border-color 0.3s ease, background 0.3s ease;
}

/* Additional field animations for registration */
#registerModal.active .input-group:nth-child(3) label {
	transition-delay: 0.31s;
}

#registerModal.active .input-group:nth-child(3) input {
	transition: all 0.4s ease 0.36s, border-color 0.3s ease, background 0.3s ease;
}

#registerModal.active .input-group:nth-child(4) label {
	transition-delay: 0.34s;
}

#registerModal.active .input-group:nth-child(4) input {
	transition: all 0.4s ease 0.39s, border-color 0.3s ease, background 0.3s ease;
}

#registerModal.active .input-group:nth-child(5) label {
	transition-delay: 0.37s;
}

#registerModal.active .input-group:nth-child(5) input {
	transition: all 0.4s ease 0.42s, border-color 0.3s ease, background 0.3s ease;
}

#registerModal.active .input-group:nth-child(6) label {
	transition-delay: 0.37s;
}

#registerModal.active .input-group:nth-child(6) input {
	transition: all 0.4s ease 0.42s, border-color 0.3s ease, background 0.3s ease;
}

#registerModal.active .age-warning {
	transition: all 0.4s ease 0.45s;
	transform: translateY(0);
	opacity: 1;
}

.age-warning {
	transform: translateY(5px);
	opacity: 0;
}

/* Date input styling */
input[type="date"] {
	position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(2);
	cursor: pointer;
}

/* Responsive adjustments for registration */
@media (max-width: 480px) {
	.name-group {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.name-group .input-group:nth-child(2) label {
		transition-delay: 0.28s;
	}
	
	.name-group .input-group:nth-child(2) input {
		transition: all 0.4s ease 0.33s, border-color 0.3s ease, background 0.3s ease;
	}
	
	/* Smaller max-height on mobile */
	.login-container.scrollable {
		max-height: 90vh;
		margin: 20px;
	}
}

/* Extra small screens */
@media (max-height: 600px) {
	.login-container.scrollable {
		max-height: 95vh;
	}
	
	.login-container {
		padding: 30px 25px;
	}
	
	.login-content h2 {
		font-size: 1.5rem;
		margin-bottom: 8px;
	}
	
	.login-content p {
		font-size: 0.9rem;
		margin-bottom: 20px;
	}
	
	.login-form {
		gap: 15px;
	}
	
	.input-group input {
		padding: 10px 14px;
		font-size: 0.9rem;
	}
	
	.login-submit-btn {
		padding: 12px;
		font-size: 0.9rem;
	}
}