/* Page-specific neon / character styles for Archer page */
body.archer{
	background: #050205;
	color: #dfe7ee;
	font-family: 'Orbitron', sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.navbar .logo{ color:#00f0ff; text-shadow:0 0 16px rgba(0,240,255,0.25); }

.nav-underline {
  height: 2px;
  background: cyan;
  box-shadow: 0 0 15px cyan;
  width: 100vw !important;
  margin: 0 !important;
  margin-left: calc(-50vw + 50%) !important;
  position: relative !important;
}

.about-header{ padding:16px 20px; display:flex; justify-content:flex-start; align-items:flex-start; }
.character-bubble-container{ display:flex; align-items:center; gap:0px; justify-content:flex-start; margin:0; max-width:none; }
.character{ width:120px; height:auto; filter:drop-shadow(0 6px 18px rgba(0,200,255,0.12)); animation: pixelBuild 5.5s ease-in-out forwards; }

@keyframes pixelBuild {
	0% {
		opacity: 0;
		clip-path: polygon(
			0% 0%, 25% 0%, 25% 20%, 15% 20%, 15% 35%, 0% 35%,
			100% 50%, 75% 50%, 75% 65%, 85% 65%, 85% 80%, 100% 80%,
			50% 100%, 50% 75%, 40% 75%, 40% 100%
		);
		filter: blur(10px) drop-shadow(0 6px 18px rgba(0,200,255,0.12));
		transform: scale(0.6);
	}
	15% {
		opacity: 0.4;
		clip-path: polygon(
			0% 0%, 30% 0%, 30% 25%, 10% 25%, 10% 40%, 0% 40%,
			100% 45%, 70% 45%, 70% 60%, 90% 60%, 90% 75%, 100% 75%,
			50% 100%, 50% 70%, 35% 70%, 35% 100%
		);
		filter: blur(8px) drop-shadow(0 6px 18px rgba(0,200,255,0.12));
		transform: scale(0.75);
	}
	30% {
		opacity: 0.7;
		clip-path: polygon(
			0% 5%, 40% 0%, 40% 30%, 5% 30%, 5% 50%, 0% 50%,
			100% 40%, 60% 40%, 60% 55%, 95% 55%, 95% 70%, 100% 70%,
			50% 100%, 50% 60%, 25% 60%, 25% 100%
		);
		filter: blur(5px) drop-shadow(0 6px 18px rgba(0,200,255,0.12));
		transform: scale(0.9);
	}
	45% {
		opacity: 1;
		clip-path: polygon(
			0% 10%, 50% 0%, 50% 35%, 0% 35%, 0% 55%,
			100% 35%, 50% 35%, 50% 60%, 100% 60%,
			48% 100%, 52% 100%, 52% 65%, 48% 65%
		);
		filter: blur(2px) drop-shadow(0 6px 18px rgba(0,200,255,0.12));
		transform: scale(0.95);
	}
	55% {
		opacity: 1;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		filter: blur(0px) drop-shadow(0 6px 18px rgba(0,200,255,0.12));
		transform: scale(1);
	}
	80% {
		opacity: 1;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		filter: blur(0px) drop-shadow(0 6px 18px rgba(0,200,255,0.12));
		transform: scale(1);
	}
	100% {
		opacity: 0;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		filter: blur(0px) drop-shadow(0 6px 18px rgba(0,200,255,0.12));
		transform: scale(1);
	}
}

.speech-bubble{
	background: linear-gradient(180deg, rgba(10,10,12,0.6), rgba(8,8,10,0.6));
	border: 2px solid #00ffff;
	padding:12px 18px; border-radius:12px; color:#c6f2ff;
	box-shadow: 0 0 20px #00ffff, inset 0 0 10px #00ffff;
	font-size:1rem; max-width:360px;
	animation: bubbleFade 5.5s ease-in-out forwards;
	margin-left: -35px;
}

@keyframes bubbleFade {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 0.3;
	}
	55% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.archer-scene{ margin:28px 0 60px; }
.city-scene{ position:relative; max-width:980px; margin:0 auto; border-radius:10px; overflow:hidden; }
.city-image{ width:100%; height:auto; display:block; filter:brightness(0.32) contrast(1.08) saturate(1.1) blur(1px); transform:scale(1.02); }

.archer-container{ position:absolute; left:50%; transform:translateX(-50%); bottom:28px; text-align:center; pointer-events:none;
	opacity:0; transform-origin:center bottom; transform: translateX(-50%) translateY(24px) scale(0.98);
	transition: all 600ms cubic-bezier(.2,.9,.2,1);
}
.archer-container.visible{ opacity:1; transform: translateX(-50%) translateY(0) scale(1); }

.archer-sprite{ width:160px; filter: drop-shadow(0 0 18px rgba(0,200,255,0.45)); }
.archer-container .speech-bubble{ margin-top:10px; background:linear-gradient(90deg, rgba(0,180,220,0.06), rgba(120,80,255,0.03)); border:1px solid rgba(0,200,255,0.32); color:#9ff; font-weight:700; text-shadow:0 0 6px rgba(0,220,255,0.06); }

main[style]{ color:#d3d9de; }

.back-home {
  text-align: center;
  margin: 36px 0 80px;
}

.back-home a {
  color: #00ffff;
  text-decoration: none;
  transition: text-shadow 0.3s ease;
}

.back-home a:hover {
  text-shadow: 0 0 12px #00ffff, 0 0 24px #00ffff;
}

@media (max-width:720px){
	.character{ width:88px; }
	.archer-sprite{ width:120px; }
	.speech-bubble{ font-size:0.95rem; }
}