.sprite-box {
	display: inline-block;
	width: 32px;
	height: 32px;
	background: var(--c64-purple);
	border: 2px solid var(--c64-text);
	position: relative;
	margin: 0 5px;
	vertical-align: middle;
}

.sprite-box::before {
	content: attr(data-sprite);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
	color: var(--c64-text);
}

.sprite-animated {
	animation: spriteFloat 3s ease-in-out infinite;
}

@keyframes spriteFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.sprite-rotate {
	animation: spriteRotate 4s linear infinite;
}

@keyframes spriteRotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.sprite-pulse {
	animation: spritePulse 2s ease-in-out infinite;
}

@keyframes spritePulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 5px var(--screen-glow);
	}
	50% {
		transform: scale(1.1);
		box-shadow: 0 0 15px var(--screen-glow);
	}
}

.pixel-border {
	border-style: solid;
	border-width: 3px;
	border-image:
		repeating-linear-gradient(
			45deg,
			var(--c64-text) 0,
			var(--c64-text) 3px,
			var(--c64-border) 3px,
			var(--c64-border) 6px
		) 3;
}

.color-block {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid var(--c64-dark);
	margin: 2px;
}

.color-block.black { background: #000000; }
.color-block.white { background: #ffffff; }
.color-block.red { background: #9f4e44; }
.color-block.cyan { background: #6abfc6; }
.color-block.purple { background: #a057a3; }
.color-block.green { background: #5cab5e; }
.color-block.blue { background: #50459b; }
.color-block.yellow { background: #c9d487; }
.color-block.orange { background: #a1683c; }
.color-block.brown { background: #6d5412; }
.color-block.light-red { background: #cb7e75; }
.color-block.dark-grey { background: #626262; }
.color-block.grey { background: #898989; }
.color-block.light-green { background: #9ae29b; }
.color-block.light-blue { background: #887ecb; }
.color-block.light-grey { background: #adadad; }

.sprite-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
	padding: 10px;
	background: var(--c64-dark);
	border: 2px solid var(--c64-text);
}

.sprite-grid .sprite-cell {
	aspect-ratio: 1;
	background: var(--c64-bg);
	border: 1px solid var(--c64-purple);
	transition: all 0.2s;
}

.sprite-grid .sprite-cell.active {
	background: var(--c64-text);
	box-shadow: 0 0 5px var(--screen-glow);
}

.sprite-grid .sprite-cell:hover {
	background: var(--c64-border);
	cursor: pointer;
}

.ascii-char {
	display: inline-block;
	font-family: monospace;
	font-size: 16px;
	line-height: 1;
	padding: 2px 4px;
	background: var(--c64-bg);
	color: var(--c64-text);
	border: 1px solid var(--c64-purple);
	text-shadow: 0 0 3px rgba(124, 112, 218, 0.5);
}

.sprite-border-anim {
	position: relative;
	padding: 20px;
	background: var(--c64-bg);
}

.sprite-border-anim::before,
.sprite-border-anim::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: var(--c64-text);
	animation: cornerPulse 2s ease-in-out infinite;
}

.sprite-border-anim::before {
	top: 0;
	left: 0;
	border-top: 3px solid var(--c64-border);
	border-left: 3px solid var(--c64-border);
}

.sprite-border-anim::after {
	bottom: 0;
	right: 0;
	border-bottom: 3px solid var(--c64-border);
	border-right: 3px solid var(--c64-border);
}

@keyframes cornerPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

.loading-sprite {
	display: inline-block;
	width: 24px;
	height: 24px;
	position: relative;
}

.loading-sprite::before,
.loading-sprite::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	background: var(--c64-text);
	animation: loadingDots 1.5s ease-in-out infinite;
}

.loading-sprite::before {
	top: 0;
	left: 0;
	animation-delay: 0s;
}

.loading-sprite::after {
	bottom: 0;
	right: 0;
	animation-delay: 0.75s;
}

@keyframes loadingDots {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.5);
		opacity: 0.5;
	}
}

.retro-progress {
	width: 100%;
	height: 20px;
	background: var(--c64-dark);
	border: 2px solid var(--c64-text);
	position: relative;
	overflow: hidden;
}

.retro-progress-bar {
	height: 100%;
	background: repeating-linear-gradient(
		90deg,
		var(--c64-purple) 0px,
		var(--c64-purple) 4px,
		var(--c64-text) 4px,
		var(--c64-text) 8px
	);
	transition: width 0.3s ease;
	box-shadow: 0 0 10px var(--screen-glow);
}

.icon-sprite {
	display: inline-block;
	font-size: 24px;
	line-height: 1;
	color: var(--c64-text);
	text-shadow: 0 0 5px rgba(124, 112, 218, 0.5);
}

.icon-sprite.user::before { content: '☺'; }
.icon-sprite.folder::before { content: '◘'; }
.icon-sprite.file::before { content: '○'; }
.icon-sprite.disk::before { content: '◙'; }
.icon-sprite.mail::before { content: '♣'; }
.icon-sprite.chat::before { content: '♪'; }
.icon-sprite.info::before { content: 'ⓘ'; }
.icon-sprite.warn::before { content: '▲'; }
.icon-sprite.error::before { content: '✖'; }
.icon-sprite.check::before { content: '✓'; }

.sprite-scanlines {
	position: relative;
}

.sprite-scanlines::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.2) 0px,
		rgba(0, 0, 0, 0.2) 1px,
		transparent 1px,
		transparent 2px
	);
	pointer-events: none;
}

.pixelated {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

.badge-sprite {
	display: inline-block;
	padding: 4px 8px;
	background: var(--c64-purple);
	border: 2px solid var(--c64-text);
	color: var(--c64-border);
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	text-shadow: none;
	box-shadow: 0 0 5px rgba(184, 176, 255, 0.3);
}

.badge-sprite.online {
	background: #51cf66;
	animation: badgePulse 2s ease-in-out infinite;
}

.badge-sprite.offline {
	background: #626262;
}

.badge-sprite.busy {
	background: #ff6b6b;
}

@keyframes badgePulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}