body {
   background-color: #16191b;
   font-family: 'Roboto Mono', monospace;
   font-style: normal;
   font-weight: 300;
   color: #fff;
   overflow-x: hidden;
   padding: 24px;
}

#console {
   font-family: 'Roboto Mono', monospace;
   position: relative;
   color: #fff;
   word-wrap: break-word;
   max-width: 800px;
   width:100%;
   box-sizing: border-box;
   margin-left:auto;
   margin-right:auto;
   font-size:13px;
   line-height: 1.5;
   border-radius: 16px;
   padding: 24;
   margin-bottom: 56px;
   z-index: 200;
}

#console #text {
   position: relative;
   z-index: 201;
   pointer-events: auto;
}

.title {
   position: relative;
   max-width: 800px;
   height: 120px;
   width:100%;
   margin-left:auto;
   margin-right:auto;
   margin-top:50px;
   margin-bottom:24px;
   padding: 24;
   box-sizing: border-box;
}

.asciiArt {
   color: #fff;
   font-size:13px;
   text-wrap-mode: nowrap;
}

.spriteContainer {
    position: relative;
    display: inline-block;
    left: 469px;
    top: -64px;
    z-index: 2;
}

#tip {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    line-height: 1;
    position: absolute;
    top: -60px;
    left: 10px;
    width: 150px;
    height: 50px;
    text-wrap-mode: nowrap;

    opacity: 0;
    /* visibility: hidden; */

    /* -webkit-transition: opacity 2s; /* Safari */
    /* transition: opacity 2s; */
}

@media (hover: none) and (pointer: coarse), (max-width: 768px) {
	#console, #tip {
		font-size:24px;
	}
   .asciiArt {
		font-size:18px;
	}
	.spriteContainer {
		left:640;
	}
   #tip {
      left: -120px;
      top: -90px;
   }
}

#sprite {
   position: relative;
   height: 52px;
   width: 30px;
}

#sprite:hover {
  cursor: pointer;
}

#charizard {
   position: absolute;
   top: -100px;
   left: -100;
   height: 52px;
   width: 58px;
   z-index: 300;
}

#bulbasaur {
   position: absolute;
   top: -100px;
   left: -100;
   height: 32px;
   width: 38px;
   z-index: 300;
}

#squirtle {
   position: absolute;
   top: -100px;
   left: -100;
   height: 30px;
   width: 30px;
   z-index: 300;
}

#pidgeot {
   position: absolute;
   top: -100px;
   left: -100;
   height: 62px;
   width: 62px;
   z-index: 300;
}

#pikachu {
   position: absolute;
   top: -100px;
   left: -100;
   height: 34px;
   width: 36px;
   z-index: 300;
}

#butterfree {
   position: absolute;
   top: -100px;
   left: -100;
   height: 38px;
   width: 52px;
   z-index: 300;
}

a:hover {
   color: #0bc;
}

a {  /*links*/
   color: #fff;
   text-decoration: none;
}
.a { /*terminal green*/
   color: #0f0;
}
.b { /*magenta*/
   color: #ff0096;
}
.c { /*blue*/
   color: #0bc;
}

.error {
   color: #ff0096;
}

.title {
   font-family: courier;
   line-height: normal;
   z-index: 250;
}

.light {
   color: #e2e6e8;
}

.bash {
	color: #0bc;
}

pre {
   text-wrap: wrap;
}

/* Mobile input field - hidden but functional */
#mobile-input {
	position: fixed;
	opacity: 0;
	pointer-events: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 150;
	font-size: 16px; /* Prevents zoom on iOS */
	background: transparent;
	cursor: text;
}

/* Tap hint button for mobile users */
#tap-hint {
	opacity: 0;
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #0bc;
	padding: 10px 20px;
	border-radius: 12px;
	font-size: 32px;
	font-family: 'Roboto Mono', monospace;
	pointer-events: auto;
	z-index: 1000;
	border: 1px solid #0bc;
	transition: opacity 0.3s ease-in-out, box-shadow 0.2s ease, transform 0.1s ease;
	cursor: pointer;
	/* Remove delay on mobile */
	touch-action: manipulation;
	/* Remove default button styles */
	background: transparent;
	outline: none;
	/* Text shimmer with background color - two layers */
	background-image: 
		linear-gradient(
			90deg,
			#0bc 0%,
			#0bc 40%,
			#ffffff 50%,
			#0bc 60%,
			#0bc 100%
		),
		linear-gradient(rgba(19, 39, 42, 0.9), rgba(19, 39, 42, 0.9));
	background-size: 250% 100%, 100% 100%;
	background-position: 100% 0, 0 0;
	background-clip: text, border-box;
	-webkit-background-clip: text, border-box;
	-webkit-text-fill-color: transparent;
}

/* Hover state - subtle glow enhancement */
#tap-hint:hover {
	box-shadow: 
		0 0 8px rgba(0, 188, 204, 0.4),
		0 0 20px rgba(0, 188, 204, 0.2);
	border-color: #1dd3ea;
}

/* Active/pressed state - darker with inset shadow */
#tap-hint:active {
	box-shadow: 
		inset 0 2px 4px rgba(0, 0, 0, 0.3),
		0 0 2px rgba(0, 188, 204, 0.3);
	transform: translateX(-50%) scale(0.98);
	background-color: rgba(20, 45, 50, 0.95);
}

/* Show tap hint on touch devices or small screens when accepting input */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
	#console.accepting-input ~ #tap-hint {
		opacity: 1;
	}
}

/* Hide tap hint when console is not accepting input (instant) */
#console:not(.accepting-input) ~ #tap-hint {
	opacity: 0;
	transition: none;
}

/* Hide tap hint when mobile input is focused (instant) */
#mobile-input:focus ~ #tap-hint,
#tap-hint.hidden {
	opacity: 0;
	transition: none;
}

/* Combined text shimmer and border glow animation for tap hint - dramatic version */
@keyframes tap-hint-glimmer {
	/* Organic, flowy glow with shifting positions and asymmetric layers */
	0% {
		background-position: 100% 0, 0 0;
		box-shadow: 
			/* Layer 1: Bottom-right, soft base */
			6px 6px 12px rgba(0, 140, 160, 0.3),
			/* Layer 2: Top-left, sharper */
			-5px -4px 10px rgba(80, 210, 230, 0.25),
			/* Layer 3: Center, base glow */
			0 0 8px rgba(0, 188, 204, 0.4),
			/* Layer 4: Outer dramatic glow */
			0 0 30px rgba(0, 188, 204, 0.15);
	}
	25% {
		background-position: 50% 0, 0 0;
		box-shadow: 
			/* Layer 1 shifts up-left, intensifies dramatically */
			3px 3px 20px rgba(0, 140, 160, 0.6),
			/* Layer 2 shifts right, grows */
			-2px -2px 18px rgba(80, 210, 230, 0.5),
			/* Layer 3 expands significantly */
			0 0 15px rgba(0, 188, 204, 0.7),
			/* Layer 4: Outer glow peaks */
			0 0 50px rgba(0, 188, 204, 0.35);
	}
	50% {
		background-position: 0% 0, 0 0;
		box-shadow: 
			/* Layer 1 shifts to top-right */
			5px -5px 16px rgba(0, 140, 160, 0.45),
			/* Layer 2 shifts down-left, peaks */
			-6px 4px 22px rgba(80, 210, 230, 0.55),
			/* Layer 3 contracts */
			0 0 10px rgba(0, 188, 204, 0.5),
			/* Layer 4: Outer glow moderates */
			0 0 40px rgba(0, 188, 204, 0.25);
	}
	75% {
		background-position: 50% 0, 0 0;
		box-shadow: 
			/* Layer 1 returns toward center, intense */
			2px 2px 24px rgba(0, 140, 160, 0.65),
			/* Layer 2 moves to bottom-right, softer */
			3px 5px 14px rgba(80, 210, 230, 0.4),
			/* Layer 3 pulses bigger */
			0 0 18px rgba(0, 188, 204, 0.75),
			/* Layer 4: Outer glow pulses again */
			0 0 55px rgba(0, 188, 204, 0.4);
	}
	100% {
		background-position: 100% 0, 0 0;
		box-shadow: 
			6px 6px 12px rgba(0, 140, 160, 0.3),
			-5px -4px 10px rgba(80, 210, 230, 0.25),
			0 0 8px rgba(0, 188, 204, 0.4),
			0 0 30px rgba(0, 188, 204, 0.15);
	}
}

/* Show tap hint on mobile devices with glimmer animation */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
	#console.accepting-input ~ #tap-hint {
		animation: tap-hint-glimmer 6s linear infinite;
	}
}

/* Visual indicator when terminal is accepting input */
#console.accepting-input {
	/* box-shadow: 0 0 10px rgba(0, 188, 204, 0.3); */
}

@media (hover: none) and (pointer: coarse), (max-width: 768px) {
	#console.accepting-input {
		box-shadow: none;
	}
}

/* Animation for when user tries to interact before ready */
@keyframes not-ready-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 0, 150, 0.4); }
	70% { box-shadow: 0 0 0 10px rgba(255, 0, 150, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 0, 150, 0); }
}

#console.not-ready {
   box-shadow: 0 0 10px rgba(0, 188, 204, 0.3);
	animation: not-ready-pulse 0.6s ease-out;
}