/* ================================
   TERMINAL WINDOW CHROME
   ================================ */

/* Terminal title bar for tabs */
.tabs::before {
	content: 'dukhi@portfolio:~$ ';
	display: block;
	background: var(--main-color);
	color: #000;
	font-family: 'Courier New', monospace;
	font-weight: bold;
	font-size: 0.9em;
	padding: 0.4em 0.8em;
	margin: -1.5em -1.5em 1em -1.5em;
	border-bottom: 2px solid var(--main-color);
	box-shadow: 0 2px 10px rgba(var(--bg-color), 0.5);
	position: relative;
}

/* Window control buttons */
.tabs::after {
	content: '●  ●  ●';
	position: absolute;
	top: 0.4em;
	right: 1em;
	color: #000;
	font-size: 1.2em;
	letter-spacing: 0.3em;
	opacity: 0.7;
}

/* Add terminal prompt to grid boxes */
.grid-row-box {
	position: relative;
	padding-top: 2.5em !important;
}

.grid-row-box::before {
	content: '╔═══════════════════════════════════════════════════════════╗';
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	right: 0.5em;
	font-size: 0.5em;
	color: var(--main-color);
	opacity: 0.3;
	font-family: monospace;
	letter-spacing: -1px;
	overflow: hidden;
	white-space: nowrap;
}

/* ================================
   ENHANCED ASCII DECORATIONS
   ================================ */

/* Section dividers */
.tabs hr {
	border: none;
	height: 1px;
	background: none;
	position: relative;
	margin: 2em 0;
}

.tabs hr::before {
	content: '─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═─═';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: var(--main-color);
	opacity: 0.5;
	font-family: monospace;
	font-size: 0.8em;
	white-space: nowrap;
}

/* Corner brackets for details */
details {
	position: relative;
}

details[open]::before {
	content: '╔';
	position: absolute;
	top: -0.2em;
	left: -0.3em;
	color: var(--main-color);
	font-size: 1.5em;
	opacity: 0.5;
}

details[open]::after {
	content: '╚';
	position: absolute;
	bottom: -0.2em;
	left: -0.3em;
	color: var(--main-color);
	font-size: 1.5em;
	opacity: 0.5;
}

/* ================================
   INTERACTIVE ELEMENTS
   ================================ */

/* Cursor trail (desktop only) */
@media (min-width: 768px) {
	.cursor-trail {
		position: fixed;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--main-color);
		pointer-events: none;
		z-index: 9998;
		opacity: 0;
		animation: cursor-fade 0.5s ease-out;
		box-shadow: 0 0 10px var(--main-color);
	}

	@keyframes cursor-fade {
		from { opacity: 0.7; transform: scale(1); }
		to { opacity: 0; transform: scale(0); }
	}
}

/* Glitch effect on hover */
@media (min-width: 768px) {
	a:not(.tab-switcher):hover,
	.grid-row-box:hover summary {
		animation: glitch-text 0.3s ease-in-out;
	}

	@keyframes glitch-text {
		0%, 100% { transform: translate(0); }
		33% { transform: translate(-2px, 1px); }
		66% { transform: translate(2px, -1px); }
	}
}

/* Blinking cursor for active elements */
.active-indicator::after {
	content: '▌';
	animation: blink-cursor 1s step-end infinite;
	margin-left: 0.2em;
	color: var(--main-color);
}

@keyframes blink-cursor {
	50% { opacity: 0; }
}

/* Online status badge - Glitchy cyberpunk style */
header::after {
	content: '[ ● ONLINE ]';
	position: absolute;
	top: 1em;
	right: 1em;
	background:
		repeating-linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.9) 0px,
			rgba(0, 0, 0, 0.9) 1px,
			rgba(0, 255, 0, 0.05) 1px,
			rgba(0, 255, 0, 0.05) 2px
		),
		rgba(0, 0, 0, 0.95);
	color: #00ff00;
	padding: 0.4em 0.8em;
	border: 2px solid #00ff00;
	border-style: dashed;
	font-family: 'Courier New', monospace;
	font-size: 0.7em;
	font-weight: bold;
	text-shadow:
		0 0 10px #00ff00,
		2px 0 2px #ff0000,
		-2px 0 2px #0000ff;
	box-shadow:
		0 0 15px rgba(0, 255, 0, 0.6),
		inset 0 0 10px rgba(0, 255, 0, 0.1);
	animation:
		online-glitch 3s ease-in-out infinite,
		online-flicker 0.15s linear infinite,
		online-shake 4s ease-in-out infinite;
	z-index: 10;
	filter: contrast(1.2) brightness(1.1);
	clip-path: polygon(
		0 0,
		calc(100% - 5px) 0,
		100% 5px,
		100% 100%,
		5px 100%,
		0 calc(100% - 5px)
	);
}

/* Main glitch animation */
@keyframes online-glitch {
	0%, 90%, 100% {
		transform: translate(0, 0) skew(0deg);
		text-shadow:
			0 0 10px #00ff00,
			2px 0 2px #ff0000,
			-2px 0 2px #0000ff;
	}
	20% {
		transform: translate(-2px, 1px) skew(0.5deg);
		text-shadow:
			0 0 10px #00ff00,
			-4px 0 2px #ff0000,
			4px 0 2px #0000ff;
	}
	40% {
		transform: translate(1px, -1px) skew(-0.3deg);
		text-shadow:
			0 0 10px #00ff00,
			3px 0 3px #ff0000,
			-3px 0 3px #0000ff;
	}
	60% {
		transform: translate(-1px, 0) skew(0.2deg);
		text-shadow:
			0 0 10px #00ff00,
			-2px 0 2px #ff0000,
			2px 0 2px #0000ff;
	}
	80% {
		transform: translate(0, 1px) skew(-0.5deg);
	}
}

/* Subtle flicker like bad connection */
@keyframes online-flicker {
	0%, 100% { opacity: 1; }
	10% { opacity: 0.95; }
	20% { opacity: 1; }
	30% { opacity: 0.92; }
	40% { opacity: 1; }
	50% { opacity: 0.98; }
	60% { opacity: 1; }
	70% { opacity: 0.9; }
	80% { opacity: 1; }
	90% { opacity: 0.96; }
}

/* Subtle shake */
@keyframes online-shake {
	0%, 100% { transform: translateX(0); }
	10% { transform: translateX(-1px); }
	20% { transform: translateX(1px); }
	30% { transform: translateX(-1px); }
	40% { transform: translateX(1px); }
	50% { transform: translateX(0); }
}

/* Scanline effect overlay on status badge */
header::before {
	content: '';
	position: absolute;
	top: 1em;
	right: 1em;
	width: 11em;
	height: 2.2em;
	background: repeating-linear-gradient(
		0deg,
		transparent 0px,
		transparent 1px,
		rgba(0, 255, 0, 0.03) 1px,
		rgba(0, 255, 0, 0.03) 2px
	);
	pointer-events: none;
	z-index: 11;
	animation: scanline-move 3s linear infinite;
}

@keyframes scanline-move {
	0% { transform: translateY(0); }
	100% { transform: translateY(2px); }
}

@keyframes pulse-glow {
	0%, 100% {
		text-shadow: 0 0 8px var(--main-color);
		opacity: 0.8;
	}
	50% {
		text-shadow: 0 0 15px var(--main-color);
		opacity: 1;
	}
}

@keyframes scanline {
	0% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

@keyframes static-noise {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-2%, -2%); }
	20% { transform: translate(2%, 0%); }
	30% { transform: translate(-1%, 2%); }
	40% { transform: translate(1%, -1%); }
	50% { transform: translate(-2%, 1%); }
	60% { transform: translate(2%, 2%); }
	70% { transform: translate(0%, -2%); }
	80% { transform: translate(-1%, 0%); }
	90% { transform: translate(1%, 1%); }
}

@keyframes scanline-drift {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(100%); }
}

@keyframes glitch-skew {
	0% { transform: skewX(0deg); }
	10% { transform: skewX(-0.5deg); }
	20% { transform: skewX(0.5deg); }
	30% { transform: skewX(0deg); }
	40% { transform: skewX(0.3deg); }
	50% { transform: skewX(-0.3deg); }
	60% { transform: skewX(0deg); }
	70% { transform: skewX(-0.5deg); }
	80% { transform: skewX(0.5deg); }
	90% { transform: skewX(0deg); }
	100% { transform: skewX(0deg); }
}

@keyframes rgb-split {
	0% { text-shadow: 0 0 8px var(--main-color); }
	25% { text-shadow: -2px 0 var(--main-color), 2px 0 #ff00ff, 0 0 8px var(--main-color); }
	50% { text-shadow: 0 0 8px var(--main-color); }
	75% { text-shadow: 2px 0 #00ffff, -2px 0 #ff0000, 0 0 8px var(--main-color); }
	100% { text-shadow: 0 0 8px var(--main-color); }
}

@keyframes flicker {
	0%, 100% { opacity: 1; }
	41% { opacity: 1; }
	42% { opacity: 0.8; }
	43% { opacity: 1; }
	45% { opacity: 0.9; }
	46% { opacity: 1; }
}

/* ================================
   VISUAL DEPTH ENHANCEMENTS
   ================================ */

/* Neon underlines for links */
a:not(.tab-switcher) {
	position: relative;
	transition: all 0.3s ease;
}

a:not(.tab-switcher)::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--main-color);
	box-shadow: 0 0 8px var(--main-color);
	transition: width 0.3s ease;
}

a:not(.tab-switcher):hover::after {
	width: 100%;
}

/* Holographic gradient accents */
.grid-row-box:hover {
	background:
		linear-gradient(135deg, rgba(var(--bg-color), 0.2) 0%, transparent 50%),
		linear-gradient(45deg, transparent 30%, rgba(var(--bg-color), 0.1) 50%, transparent 70%);
	animation: holographic-shift 3s ease-in-out infinite;
}

@keyframes holographic-shift {
	0%, 100% { filter: hue-rotate(0deg); }
	50% { filter: hue-rotate(10deg); }
}

/* Layered card depth */
.grid-row-box {
	box-shadow:
		0 0 0 2px var(--main-color),
		0 4px 8px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ================================
   DATA VISUALIZATION ELEMENTS
   ================================ */

/* Hexadecimal addresses in margins */
body::before {
	content: '0x00000000\A0x00000010\A0x00000020\A0x00000030\A0x00000040\A0x00000050\A0x00000060\A0x00000070\A0x00000080\A0x00000090\A0x000000A0\A0x000000B0\A0x000000C0\A0x000000D0';
	position: fixed;
	left: 0.5em;
	top: 8em;
	font-family: 'Courier New', monospace;
	font-size: 0.6em;
	color: var(--main-color);
	opacity: 0.15;
	white-space: pre;
	pointer-events: none;
	z-index: 1;
	line-height: 2.5;
}

/* Binary pattern decoration */
body::after {
	content: '01001000 01000101 01001100 01001100 01001111';
	position: fixed;
	right: 0.5em;
	top: 8em;
	font-family: 'Courier New', monospace;
	font-size: 0.5em;
	color: var(--main-color);
	opacity: 0.1;
	writing-mode: vertical-rl;
	pointer-events: none;
	z-index: 1;
}

/* System status indicators */
.tabs > h2::before {
	content: '[SYS::OK] ';
	color: #00ff00;
	font-size: 0.7em;
	margin-right: 0.5em;
	animation: pulse-green 2s ease-in-out infinite;
}

/* Timestamp for sections */
details summary::after {
	content: ' [' attr(data-timestamp) ']';
	font-size: 0.7em;
	opacity: 0.5;
	margin-left: 0.5em;
}

/* ================================
   NAVIGATION ENHANCEMENTS
   ================================ */

/* Breadcrumb style navigation */
nav ul {
	position: relative;
}

nav ul::before {
	content: 'root@dukhi.dev: ~/';
	position: absolute;
	left: -10em;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Courier New', monospace;
	font-size: 0.8em;
	color: var(--main-color);
	opacity: 0.5;
	white-space: nowrap;
}

/* Active tab indicator */
.tab-active::before {
	content: '▶ ';
	color: var(--main-color);
	animation: blink-cursor 1s step-end infinite;
}

/* Keyboard shortcut hints */
.tab-switcher::after {
	content: attr(data-shortcut);
	font-size: 0.7em;
	opacity: 0.4;
	margin-left: 0.5em;
	border: 1px solid var(--main-color);
	padding: 0.1em 0.3em;
	border-radius: 2px;
}

/* Command history footer */
footer::before {
	content: 'Last login: ' attr(data-time) ' from 127.0.0.1';
	display: block;
	font-family: 'Courier New', monospace;
	font-size: 0.7em;
	color: var(--main-color);
	opacity: 0.5;
	margin-bottom: 1em;
}

/* ================================
   CONTENT PRESENTATION STYLES
   ================================ */

/* Terminal output style for blog posts */
.post {
	border-left: 4px solid var(--main-color);
	padding-left: 1em;
	position: relative;
}

.post::before {
	content: '>';
	position: absolute;
	left: -0.5em;
	color: var(--main-color);
	font-weight: bold;
	animation: blink-cursor 1s step-end infinite;
}

/* Directory tree style */
.contact-link::before {
	content: '├── ';
	color: var(--main-color);
	opacity: 0.5;
	margin-right: 0.3em;
}

.contact-link:last-child::before {
	content: '└── ';
}

/* Man page style headers */
h3 {
	border-bottom: 2px dashed var(--main-color);
	padding-bottom: 0.3em;
	position: relative;
}

h3::before {
	content: '$ ';
	color: var(--main-color);
	margin-right: 0.3em;
}

/* Code block styling */
pre, code {
	background: rgba(0, 0, 0, 0.5);
	border-left: 3px solid var(--main-color);
	padding: 1em;
	position: relative;
	overflow-x: auto;
}

pre::before {
	content: '// OUTPUT:';
	display: block;
	color: var(--main-color);
	opacity: 0.5;
	font-size: 0.8em;
	margin-bottom: 0.5em;
}

/* Progress bars for visual elements */
.progress-bar {
	width: 100%;
	height: 20px;
	background: rgba(0, 0, 0, 0.5);
	border: 2px solid var(--main-color);
	position: relative;
	overflow: hidden;
}

.progress-bar::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: var(--progress, 50%);
	background: var(--main-color);
	box-shadow: 0 0 10px var(--main-color);
	animation: progress-pulse 2s ease-in-out infinite;
}

@keyframes progress-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* ================================
   VISITOR INFO SECTION
   ================================ */

#visitor-info {
	font-family: 'Courier New', monospace;
	font-size: 0.8em;
	line-height: 1.5;
	background: rgba(0, 0, 0, 0.6);
	border-left: 3px solid var(--main-color);
	padding: 0.8em;
	position: relative;
	overflow: hidden;
	max-height: 500px;
	overflow-y: auto;
}

/* Custom scrollbar for visitor info */
#visitor-info::-webkit-scrollbar {
	width: 8px;
}

#visitor-info::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.8);
	border-left: 1px solid var(--main-color);
}

#visitor-info::-webkit-scrollbar-thumb {
	background: var(--main-color);
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

#visitor-info::-webkit-scrollbar-thumb:hover {
	background: var(--main-color);
	box-shadow: 0 0 10px var(--main-color);
}

/* Firefox scrollbar */
#visitor-info {
	scrollbar-width: thin;
	scrollbar-color: var(--main-color) rgba(0, 0, 0, 0.8);
}

#visitor-info::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent 0px,
		transparent 1px,
		rgba(var(--bg-color), 0.05) 1px,
		rgba(var(--bg-color), 0.05) 2px
	);
	pointer-events: none;
	animation: scanline-scroll 10s linear infinite;
}

@keyframes scanline-scroll {
	0% { transform: translateY(0); }
	100% { transform: translateY(20px); }
}

.visitor-scan {
	position: relative;
	z-index: 1;
}

.scan-header,
.scan-footer {
	color: var(--main-color);
	font-weight: bold;
	text-align: center;
	margin: 0.5em 0;
	text-shadow: 0 0 10px var(--main-color);
	opacity: 0.8;
	font-size: 0.9em;
	letter-spacing: 0.1em;
}

.scan-line {
	margin: 0.2em 0;
	color: var(--main-color);
	text-shadow: 0 0 5px var(--main-color);
	transition: all 0.3s ease;
}

.scan-line:hover {
	transform: translateX(5px);
	text-shadow: 0 0 15px var(--main-color);
}

.scan-label {
	color: #00ff00;
	font-weight: bold;
	display: block;
	margin-top: 0.6em;
	margin-bottom: 0.2em;
	text-shadow: 0 0 10px #00ff00;
	border-left: 3px solid #00ff00;
	padding-left: 0.5em;
	background: linear-gradient(90deg, rgba(0, 255, 0, 0.1) 0%, transparent 100%);
}

.scan-value {
	color: #ffffff;
	text-shadow: 0 0 3px var(--main-color);
	font-weight: normal;
}

.scan-value-dim {
	color: rgba(255, 255, 255, 0.5);
	text-shadow: none;
	font-size: 0.85em;
}

.scan-small {
	font-size: 0.75em;
	opacity: 0.8;
	word-break: break-all;
	display: block;
	margin-top: 0.2em;
	color: rgba(255, 255, 255, 0.7);
}

.status-online {
	color: #00ff00;
	font-weight: bold;
	text-shadow: 0 0 10px #00ff00;
	animation: pulse-green 2s ease-in-out infinite;
}

/* Loading animation for initial state */
@keyframes scan-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

#visitor-info .scan-line:first-child {
	animation: scan-pulse 1.5s ease-in-out infinite;
}

/* Speed test loading spinner */
.speed-loader {
	display: inline-block;
	width: 8px;
	height: 8px;
	border: 2px solid var(--main-color);
	border-top: 2px solid transparent;
	border-radius: 50%;
	animation: speed-spin 0.8s linear infinite;
	margin-right: 5px;
	vertical-align: middle;
}

@keyframes speed-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Mobile adjustments for visitor info */
@media screen and (max-width: 767px) {
	#visitor-info {
		font-size: 0.7em;
		padding: 0.6em;
		line-height: 1.4;
		max-height: 400px;
	}

	#visitor-info::before {
		animation: none; /* Disable scanline animation on mobile */
	}

	.scan-line {
		margin: 0.15em 0;
	}

	.scan-line:hover {
		transform: none;
	}

	.scan-label {
		margin-top: 0.5em;
		margin-bottom: 0.15em;
		font-size: 0.95em;
	}

	.scan-small {
		font-size: 0.7em;
		line-height: 1.4;
	}

	.scan-header,
	.scan-footer {
		font-size: 0.75em;
		margin: 0.3em 0;
	}

	.scan-value-dim {
		font-size: 0.8em;
	}
}

/* ================================
   GAMES SECTION
   ================================ */

/* Games layout */
.games-layout {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1.5em;
	margin-top: 1em;
}

.game-selector-wrapper {
	background: rgba(0, 0, 0, 0.6);
	padding: 1.5em;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 3px solid var(--main-color);
}

.game-selector-wrapper h3 {
	color: var(--main-color);
	margin-top: 0;
	margin-bottom: 1em;
	text-shadow: 0 0 10px var(--main-color);
}

.game-display-wrapper {
	background: rgba(0, 0, 0, 0.4);
	padding: 1em;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

#game-list {
	list-style: none;
	padding: 0;
	margin: 1em 0;
}

#game-list li {
	margin: 0.8em 0;
	display: flex;
	align-items: center;
	gap: 1em;
}

.game-btn {
	background: var(--main-color);
	color: #000;
	border: 2px solid transparent;
	padding: 0.6em 1.2em;
	font-family: monospace;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	text-shadow: none;
	box-shadow: 0 0 10px var(--main-color);
	border-radius: 4px;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.game-btn:hover {
	background: #fff;
	box-shadow: 0 0 20px var(--main-color);
	transform: translateX(5px);
	border-color: var(--main-color);
}

.game-btn:active {
	transform: translateX(3px) scale(0.98);
	box-shadow: 0 0 25px var(--main-color), inset 0 0 15px rgba(0, 0, 0, 0.3);
}

.game-desc {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9em;
	font-style: italic;
}

/* Game container */
#game-container {
	min-height: 500px;
	background: rgba(0, 0, 0, 0.8);
	padding: 2em;
	border: 2px solid var(--main-color);
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.game-welcome {
	text-align: center;
	padding: 2em;
}

.game-ascii {
	color: var(--main-color);
	font-size: 0.8em;
	line-height: 1.2;
	text-shadow: 0 0 10px var(--main-color);
}

.game-hint {
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
	margin-top: 1em;
}

/* Game screen common styles */
.game-screen {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.game-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1em;
	border-bottom: 2px solid var(--main-color);
}

.game-header h3 {
	color: var(--main-color);
	margin: 0;
	text-shadow: 0 0 10px var(--main-color);
}

.game-score {
	color: #fff;
	font-weight: bold;
	font-size: 1.1em;
}

.game-controls {
	display: flex;
	gap: 1em;
	justify-content: center;
	padding-top: 1em;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.game-control-btn {
	background: rgba(255, 255, 255, 0.1);
	color: var(--main-color);
	border: 2px solid var(--main-color);
	padding: 0.7em 1.8em;
	font-family: monospace;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	border-radius: 4px;
	text-shadow: 0 0 5px var(--main-color);
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	font-size: 1em;
}

.game-control-btn:hover {
	background: var(--main-color);
	color: #000;
	box-shadow: 0 0 20px var(--main-color);
	text-shadow: none;
}

.game-control-btn:active {
	transform: scale(0.96);
	box-shadow: 0 0 25px var(--main-color), inset 0 0 15px rgba(0, 0, 0, 0.5);
}

/* Snake game specific */
#snake-canvas {
	display: block;
	margin: 0 auto;
	border: 2px solid var(--main-color);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.3);
	background: #000;
}

.game-controls-hint {
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.9em;
	margin: 1em 0;
}

.snake-touch-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	margin: 1em 0;
}

.touch-row {
	display: flex;
	gap: 0.5em;
}

.touch-btn {
	width: 70px;
	height: 70px;
	background: linear-gradient(145deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
	border: 3px solid var(--main-color);
	color: var(--main-color);
	font-size: 1.8em;
	cursor: pointer;
	transition: all 0.15s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(0, 0, 0, 0.5);
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	font-weight: bold;
	text-shadow: 0 0 10px var(--main-color);
	border-radius: 8px;
}

.touch-btn:active {
	background: var(--main-color);
	color: #000;
	box-shadow: 0 0 25px var(--main-color), inset 0 0 20px rgba(0, 0, 0, 0.8);
	transform: scale(0.92);
	border-color: #fff;
}

/* Memory game specific */
.memory-grid {
	display: grid;
	grid-template-columns: repeat(2, 150px);
	grid-template-rows: repeat(2, 150px);
	gap: 20px;
	justify-content: center;
	margin: 2em 0;
}

.memory-btn {
	border: 4px solid var(--main-color);
	background: rgba(0, 0, 0, 0.8);
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	border-radius: 8px;
}

.memory-btn:nth-child(1) { border-color: #ff00ff; }
.memory-btn:nth-child(2) { border-color: #ff8800; }
.memory-btn:nth-child(3) { border-color: #00ffff; }
.memory-btn:nth-child(4) { border-color: #00ff00; }

.memory-btn.memory-active {
	box-shadow: 0 0 35px currentColor, inset 0 0 35px currentColor;
	transform: scale(0.95);
}

.memory-btn:nth-child(1).memory-active { background: rgba(255, 0, 255, 0.6); }
.memory-btn:nth-child(2).memory-active { background: rgba(255, 136, 0, 0.6); }
.memory-btn:nth-child(3).memory-active { background: rgba(0, 255, 255, 0.6); }
.memory-btn:nth-child(4).memory-active { background: rgba(0, 255, 0, 0.6); }

.game-status {
	text-align: center;
	color: var(--main-color);
	font-size: 1.1em;
	padding: 1em;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Tetris game specific */
#tetris-canvas {
	display: block;
	margin: 0 auto;
	border: 2px solid var(--main-color);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.3);
	background: #000;
}

.tetris-touch-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	margin: 1em 0;
}

/* Asteroids game specific */
#asteroids-canvas {
	display: block;
	margin: 0 auto;
	border: 2px solid var(--main-color);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.3);
	background: #000;
}

.asteroids-touch-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	margin: 1em 0;
}

/* Typing game specific */
.typing-container {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.typing-stats {
	display: flex;
	gap: 2em;
	color: #fff;
}

.typing-stats span {
	color: var(--main-color);
}

.typing-target {
	font-family: 'Courier New', monospace;
	font-size: 1.2em;
	line-height: 1.8;
	padding: 1.5em;
	background: rgba(0, 0, 0, 0.6);
	border: 2px solid var(--main-color);
	min-height: 80px;
	color: rgba(255, 255, 255, 0.7);
}

.typing-input {
	font-family: 'Courier New', monospace;
	font-size: 1.2em;
	padding: 1em;
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid var(--main-color);
	color: var(--main-color);
	outline: none;
	width: 100%;
	border-radius: 4px;
	box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.typing-input:focus {
	border-color: #fff;
	box-shadow: 0 0 20px var(--main-color), inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.typing-input::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.char-correct {
	color: #00ff00;
	text-shadow: 0 0 5px #00ff00;
}

.char-wrong {
	color: #ff0000;
	text-shadow: 0 0 5px #ff0000;
	background: rgba(255, 0, 0, 0.2);
}

/* Number guessing game specific */
.guess-container {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	align-items: center;
}

.guess-hint {
	font-size: 1.1em;
	color: #fff;
}

.guess-hint span {
	color: var(--main-color);
	font-weight: bold;
}

.guess-feedback {
	font-size: 1.2em;
	padding: 1em;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 500px;
}

.guess-input-container {
	display: flex;
	gap: 1em;
	width: 100%;
	max-width: 400px;
}

.guess-input {
	flex: 1;
	font-family: 'Courier New', monospace;
	font-size: 1.5em;
	padding: 0.5em;
	background: rgba(0, 0, 0, 0.8);
	border: 3px solid var(--main-color);
	color: var(--main-color);
	outline: none;
	text-align: center;
	border-radius: 4px;
	box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.guess-input:focus {
	border-color: #fff;
	box-shadow: 0 0 20px var(--main-color), inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.guess-input::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

/* Mobile adjustments for games */
@media screen and (max-width: 767px) {
	/* Overall games section */
	#games {
		padding: 0.5em;
	}

	#games h2 {
		font-size: 1.3em;
	}

	#games p {
		font-size: 0.9em;
	}

	#games br {
		display: none;
	}

	/* Stack layout vertically on mobile */
	.games-layout {
		grid-template-columns: 1fr;
		gap: 1em;
		margin-top: 0.5em;
	}

	.game-selector-wrapper {
		padding: 1em;
		order: 1;
	}

	.game-selector-wrapper h3 {
		font-size: 1em;
		margin-bottom: 0.8em;
	}

	.game-display-wrapper {
		padding: 0.5em;
		order: 2;
	}

	#game-list {
		margin: 0.5em 0;
	}

	#game-list li {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3em;
		margin: 0.5em 0;
		padding: 0.5em 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	#game-list li:last-child {
		border-bottom: none;
	}

	.game-btn {
		width: 100%;
		padding: 0.8em 1em;
		font-size: 0.9em;
		text-align: left;
	}

	.game-btn:hover {
		transform: none;
	}

	.game-desc {
		font-size: 0.75em;
		line-height: 1.4;
		padding-left: 0.5em;
	}

	/* Game container */
	#game-container {
		padding: 1em 0.5em;
		min-height: 300px;
		border-width: 1px;
	}

	.game-welcome {
		padding: 0.5em;
	}

	.game-ascii {
		font-size: 0.45em;
		line-height: 1.1;
	}

	.game-hint {
		font-size: 0.8em;
		margin-top: 0.5em;
	}

	/* Game screen */
	.game-screen {
		gap: 1em;
	}

	.game-header {
		flex-direction: column;
		gap: 0.5em;
		align-items: flex-start;
		padding-bottom: 0.8em;
	}

	.game-header h3 {
		font-size: 1em;
	}

	.game-score {
		font-size: 0.95em;
	}

	/* Snake game */
	#snake-canvas {
		width: 100%;
		max-width: 280px;
		height: 280px;
	}

	.snake-touch-controls {
		margin: 0.5em 0;
	}

	.touch-btn {
		width: 50px;
		height: 50px;
		font-size: 1.2em;
	}

	/* Memory game */
	.memory-grid {
		grid-template-columns: repeat(2, 100px);
		grid-template-rows: repeat(2, 100px);
		gap: 12px;
		margin: 1em 0;
	}

	.memory-btn {
		border-width: 3px;
	}

	.game-status {
		font-size: 0.9em;
		padding: 0.8em;
	}

	/* Tetris game */
	#tetris-canvas {
		width: 100%;
		max-width: 250px;
		height: 500px;
	}

	.tetris-touch-controls {
		margin: 0.5em 0;
	}

	/* Asteroids game */
	#asteroids-canvas {
		width: 100%;
		max-width: 320px;
		height: 320px;
	}

	.asteroids-touch-controls {
		margin: 0.5em 0;
	}

	/* Game controls */
	.game-controls {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.8em;
		padding-top: 1em;
	}

	.game-control-btn {
		flex: 1;
		min-width: 130px;
		padding: 1em 1.2em;
		font-size: 1em;
		border-width: 3px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	}

	.game-btn {
		padding: 1em 1.2em;
		font-size: 1em;
		border-width: 2px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	}
}

/* ================================
   MOBILE MENU
   ================================ */

.mobile-menu-btn {
	display: none;
	background: var(--main-color);
	border: 2px solid var(--main-color);
	padding: 0.6em 0.7em;
	cursor: pointer;
	flex-direction: column;
	gap: 4px;
	position: fixed;
	top: 1em;
	right: 1em;
	z-index: 1001;
	border-radius: 8px;
	box-shadow: 0 0 20px var(--main-color);
	transition: all 0.3s ease;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
}

.mobile-menu-btn:active {
	transform: scale(0.92);
	box-shadow: 0 0 30px var(--main-color);
}

.hamburger-line {
	width: 25px;
	height: 3px;
	background: #000;
	border-radius: 2px;
	transition: all 0.3s ease;
}

/* Hamburger to X transformation */
.mobile-menu-btn.active .hamburger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.1) rotateX(5deg);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	overflow: hidden;
	perspective: 1000px;
}

.mobile-menu-overlay.closing {
	animation: glitch-out 0.5s ease-in forwards;
}

/* Animated cable static background */
.mobile-menu-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='6.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	opacity: 0.15;
	pointer-events: none;
	z-index: 1;
	animation: static-noise 0.2s steps(4) infinite;
}

.mobile-menu-overlay.active::before {
	animation: static-noise 0.2s steps(4) infinite, static-flash 0.6s ease-out;
}

.mobile-menu-overlay.closing::before {
	animation: static-noise 0.1s steps(8) infinite, static-flash-out 0.5s ease-in;
}

@keyframes static-flash-out {
	0% { opacity: 0.15; }
	20% { opacity: 0.6; }
	40% { opacity: 0.2; }
	60% { opacity: 0.8; }
	80% { opacity: 0.3; }
	100% { opacity: 0; }
}

@keyframes static-flash {
	0%, 10% { opacity: 0.8; }
	20% { opacity: 0.3; }
	30% { opacity: 0.6; }
	40% { opacity: 0.2; }
	50% { opacity: 0.5; }
	100% { opacity: 0.15; }
}

/* Scanline effect */
.mobile-menu-overlay::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.15),
		rgba(0, 0, 0, 0.15) 1px,
		transparent 1px,
		transparent 3px
	);
	pointer-events: none;
	z-index: 1;
	animation: scanline-drift 8s linear infinite;
}

.mobile-menu-overlay.active {
	opacity: 1;
	visibility: visible;
	transform: scale(1) rotateX(0deg);
	animation: glitch-in 0.6s ease-out;
}

@keyframes glitch-in {
	0% {
		opacity: 0;
		transform: scale(1.2) rotateX(10deg);
		filter: blur(10px);
	}
	20% {
		opacity: 0.5;
		transform: scale(0.95) rotateX(-2deg) skewX(-5deg);
		filter: blur(5px);
	}
	40% {
		opacity: 0.8;
		transform: scale(1.05) rotateX(2deg) skewX(3deg);
		filter: blur(2px);
	}
	60% {
		opacity: 0.9;
		transform: scale(0.98) rotateX(-1deg);
		filter: blur(1px);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotateX(0deg);
		filter: blur(0);
	}
}

@keyframes glitch-out {
	0% {
		opacity: 1;
		transform: scale(1) rotateX(0deg);
		filter: blur(0) brightness(1);
	}
	15% {
		opacity: 0.9;
		transform: scale(1.02) rotateX(2deg) skewX(-3deg);
		filter: blur(1px) brightness(1.2);
	}
	30% {
		opacity: 0.7;
		transform: scale(0.95) rotateX(-3deg) skewX(5deg) translateX(-20px);
		filter: blur(3px) brightness(0.8);
	}
	45% {
		opacity: 0.5;
		transform: scale(1.1) rotateX(5deg) skewX(-8deg) translateX(20px);
		filter: blur(5px) brightness(1.3);
	}
	60% {
		opacity: 0.3;
		transform: scale(0.85) rotateY(-10deg) translateY(30px);
		filter: blur(8px) brightness(0.5);
	}
	80% {
		opacity: 0.1;
		transform: scale(0.5) rotateY(15deg) translateY(-50px);
		filter: blur(15px) brightness(2);
	}
	100% {
		opacity: 0;
		transform: scale(0.3) rotateY(30deg) translateY(100px);
		filter: blur(20px) brightness(0);
	}
}

.mobile-menu-nav {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 5em 1.5em;
	box-sizing: border-box;
	z-index: 2;
	overflow-x: hidden;
}

/* VHS glitch bars */
.mobile-menu-nav::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(255, 255, 255, 0.03) 2px,
		rgba(255, 255, 255, 0.03) 3px,
		transparent 3px,
		transparent 9px,
		var(--main-color) 9px,
		var(--main-color) 10px
	);
	background-size: 100% 100%;
	opacity: 0;
	z-index: 10;
	pointer-events: none;
	animation: vhs-glitch 4s infinite;
	mix-blend-mode: overlay;
}

@keyframes vhs-glitch {
	0%, 90%, 100% { opacity: 0; transform: translateY(0); }
	91% { opacity: 0.6; transform: translateY(10px) scaleY(1.02); }
	92% { opacity: 0; transform: translateY(-5px) scaleY(0.98); }
	93% { opacity: 0.4; transform: translateY(15px) scaleY(1.01); }
	94% { opacity: 0; transform: translateY(0); }
}

.mobile-menu-header {
	margin-bottom: 2em;
	text-align: center;
	opacity: 0;
	transform: translateY(-30px) rotateX(90deg);
	transition: all 0.5s ease;
}

.mobile-menu-overlay.active .mobile-menu-header {
	opacity: 1;
	transform: translateY(0) rotateX(0deg);
	transition-delay: 0.2s;
}

.mobile-menu-overlay.closing .mobile-menu-header {
	opacity: 0;
	transform: translateY(-50px) rotateX(-90deg) scale(0.5);
	transition: all 0.3s ease;
}

.mobile-menu-ascii {
	color: var(--main-color);
	font-size: 0.85em;
	line-height: 1.2;
	text-shadow: 0 0 10px var(--main-color);
	margin: 0 0 0.5em 0;
	animation: rgb-split 4s infinite, flicker 5s infinite;
}

.mobile-menu-subtitle {
	color: var(--main-color);
	font-size: 0.9em;
	letter-spacing: 0.2em;
	text-shadow: 0 0 8px var(--main-color);
	margin: 0;
	opacity: 0.8;
	animation: glitch-skew 6s infinite;
}

.menu-bracket {
	display: none;
}

.mobile-menu-footer {
	margin-top: 2em;
	text-align: center;
	padding-top: 1em;
	border-top: 1px solid var(--main-color);
	width: 90%;
	max-width: 300px;
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.5s ease;
}

.mobile-menu-overlay.active .mobile-menu-footer {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.6s;
}

.mobile-menu-overlay.closing .mobile-menu-footer {
	opacity: 0;
	transform: translateY(50px) scale(0.5);
	transition: all 0.3s ease;
}

.menu-status {
	color: var(--main-color);
	font-size: 0.85em;
	letter-spacing: 0.1em;
	text-shadow: 0 0 8px var(--main-color);
	margin: 0;
	animation: pulse-glow 2s infinite, flicker 7s infinite;
}

.mobile-menu-title {
	color: var(--main-color);
	font-size: 1.8em;
	font-weight: bold;
	letter-spacing: 0.3em;
	text-shadow: 0 0 15px var(--main-color);
	margin: 0;
	padding: 0.5em;
	border-bottom: 2px solid var(--main-color);
	display: inline-block;
}

.mobile-menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
	width: 100%;
	max-width: 90%;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	overflow: hidden;
}

.mobile-menu-list li {
	margin: 0;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.4s ease;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.mobile-menu-overlay.active .mobile-menu-list li {
	opacity: 1;
	transform: translateY(0);
}

.mobile-menu-overlay.closing .mobile-menu-list li {
	opacity: 0;
	transform: translateX(-100px) rotateY(-45deg);
	transition: all 0.25s ease;
}

.mobile-menu-overlay.closing .mobile-menu-list li:nth-child(1) { transition-delay: 0s; }
.mobile-menu-overlay.closing .mobile-menu-list li:nth-child(2) { transition-delay: 0.02s; }
.mobile-menu-overlay.closing .mobile-menu-list li:nth-child(3) { transition-delay: 0.04s; }
.mobile-menu-overlay.closing .mobile-menu-list li:nth-child(4) { transition-delay: 0.06s; }
.mobile-menu-overlay.closing .mobile-menu-list li:nth-child(5) { transition-delay: 0.08s; }
.mobile-menu-overlay.closing .mobile-menu-list li:nth-child(6) { transition-delay: 0.1s; }
.mobile-menu-overlay.closing .mobile-menu-list li:nth-child(7) { transition-delay: 0.12s; }

.mobile-menu-overlay.active .mobile-menu-list li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-menu-list li:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu-overlay.active .mobile-menu-list li:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-menu-list li:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu-overlay.active .mobile-menu-list li:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-menu-list li:nth-child(6) { transition-delay: 0.35s; }
.mobile-menu-overlay.active .mobile-menu-list li:nth-child(7) { transition-delay: 0.4s; }

.mobile-menu-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5em;
	color: var(--main-color);
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	padding: 0.8em 1em;
	border: none;
	border-left: 3px solid var(--main-color);
	transition: all 0.3s ease;
	text-shadow: 0 0 8px var(--main-color);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
	letter-spacing: 0.1em;
	position: relative;
	overflow: hidden;
	word-break: keep-all;
	white-space: nowrap;
	font-family: 'Courier New', monospace;
}

.mobile-menu-link::before {
	content: '>';
	position: relative;
	color: var(--main-color);
	font-weight: bold;
	margin-right: 0.3em;
	animation: blink-cursor 1.5s step-end infinite;
}

.mobile-menu-link::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 3px;
	height: 100%;
	background: var(--main-color);
	opacity: 0.5;
}

.mobile-menu-link:hover,
.mobile-menu-link:active {
	background: linear-gradient(90deg, var(--main-color) 0%, rgba(var(--main-color-rgb, 109, 253, 96), 0.8) 100%);
	color: #000;
	border-left-color: #000;
	box-shadow: 0 0 20px var(--main-color), inset 0 0 20px rgba(0, 0, 0, 0.3);
	text-shadow: none;
	padding-left: 1.5em;
}

.mobile-menu-link:hover::before,
.mobile-menu-link:active::before {
	color: #000;
}

.mobile-menu-link:hover::after,
.mobile-menu-link:active::after {
	background: #000;
	opacity: 0.8;
}

@keyframes scan-across {
	0% { left: -100%; }
	50% { left: 100%; }
	100% { left: 100%; }
}

@keyframes border-glitch {
	0%, 100% { border-color: var(--main-color); }
	33% { border-color: #ff00ff; }
	66% { border-color: #00ffff; }
}

/* ================================
   MOBILE OPTIMIZATIONS
   ================================ */

@media screen and (max-width: 767px) {
	/* Show mobile menu button and hide regular nav */
	.mobile-menu-btn {
		display: flex;
	}

	#nav-tabs {
		display: none;
	}

	.mobile-menu-overlay {
		display: block;
	}

	/* Disable expensive effects on mobile */
	body::before,
	body::after,
	.cursor-trail,
	header::after,
	header::before {
		display: none;
	}

	.tabs::before {
		font-size: 0.7em;
		padding: 0.3em 0.5em;
	}

	.tabs::after {
		font-size: 0.9em;
		top: 0.3em;
		right: 0.5em;
	}

	.grid-row-box:hover {
		animation: none;
	}

	a:not(.tab-switcher):hover {
		animation: none;
	}

	nav ul::before {
		display: none;
	}

	/* Simplify decorations */
	.grid-row-box::before {
		font-size: 0.4em;
	}

	details[open]::before,
	details[open]::after {
		display: none;
	}
}