Pure CSS Retro Arcade Machine

This is a Pure CSS Retro Arcade Machine. It constructs a highly detailed, nostalgic gaming cabinet entirely out of HTML nodes and CSS styling. Its function is to showcase the power of CSS as an illustrative medium, replacing static raster images or SVGs with resolution-independent, scalable code.

Specs

• Weight: ~5 KB. Zero dependencies. No external images.
• Performance: High. Relies purely on CSS Paint, though multiple overlapping radial and conic gradients might incur minor rendering costs on very old devices.
• Theming / Customization: Color palette is strictly managed via CSS variables (--c1, --m1, --g1, etc.) on the :root selector, making color swaps instantaneous.
• Responsiveness: Fluid. Built exclusively with vmin units, ensuring the machine scales proportionally to any screen size without requiring a single media query.

Anatomy

The structure relies on DOM stacking and CSS pseudo-elements to fake geometric complexity.

• HTML (The Skeleton): A semantic-free grid of div and span tags (.screen, .joystick, .buttons, .coins) acting as a drawing canvas.
• CSS (The Skin): Uses ::before and ::after pseudo-elements extensively to triple the visual output of each node. Texturing and 3D shapes are achieved through complex multi-layered backgrounds and inset shadows.
• JS (The Nervous System): Absent.

Logic

The core technique is “Background Layering”:

.joystick span:before {
	background: 
		radial-gradient(ellipse at 30% 27%, #ffffffa8 0.1vmin, #fff0 0.5vmin), 
		linear-gradient(-106deg, #fff0 0 3.5vmin, var(--j1) 3.8vmin, #fff0 100%), 
		radial-gradient(circle at 33% 80%, #fff0 0 1.5vmin, var(--j2) 100%), 
		conic-gradient(from -15deg at 50% 8vmin, var(--j1) 0 30deg, #fff0 0 100%);
	background-size: 100% 100%, 100% 100%, 100% 35%, 100% 100%;
	background-position: 0 0, 0 0, -100% 0, 0 0;
}

Instead of adding DOM nodes for every highlight, shadow, or surface texture, the developer stacks multiple gradient types (radial, linear, conic) on a single element. By explicitly slicing, sizing (background-size), and offsetting (background-position) each gradient layer, a flat <div> base gains complex 3D contours, lighting, and materials without bloating the HTML tree.

Feel

Crisp and nostalgic. The absolute precision of the CSS geometry creates a pixel-perfect, vector-like sharpness. The glowing text overlay (-webkit-background-clip: text) and precise drop shadows give the “GAME OVER” screen an authentic, tactile CRT phosphor burn without ever needing a heavy image file.