:root {
	--title: "Air Hockey";
	--author: "Matt Cannon";
	--contact: "mc@mattcannon.design";
	--description: "A fast-paced neon air hockey game built with Canvas 2D, featuring responsive mouse and touch controls, dynamic physics, CPU opponent AI, particle effects, sound design, and arcade-style UI. Track stats like streaks, top speed, and power hits while racing to 7 in a glowing, high-energy arena. Includes slo-mo game point moments, screen shake, and confetti victory effects for a polished arcade experience.";
	--keywords: "air hockey, arcade game, canvas game, javascript game, neon, sports game, physics, puck, mallet, cpu ai, particle effects, confetti, sound effects, touch controls, mouse controls, responsive, html5 canvas, game ui, vertical, portrait, mobile";
	--last-modified: "2026-08-15";
	--content-language: "en";
	--generator: "HTML5, CSS3 (Flexbox, Animations, Keyframes), JavaScript, Canvas 2D API";

	--blue: #00d4ff;
	--red: #ff2d55;
	--gold: #ffc940;
	--bg: #04060a;
	--panel: #080d14;

	/* vertical chrome budget: both stat panels + credit + gaps + body padding */
	--chrome: 174px;
	/* board aspect: 520 / 760 */
	--board-ar: 0.68421;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	overscroll-behavior: none;
	height: 100%;
}

body {
	background: var(--bg);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Orbitron", monospace;
	overflow: hidden;
	cursor: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
	padding: 6px;
}

.screen {
	cursor: default;
}
button {
	cursor: pointer;
}

/* ══ Layout — vertical stack: CPU panel / board / YOU panel ══ */
#outer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;

	/* Board width is limited by whichever runs out first:
	   the viewport width, a sane desktop cap, or the leftover height. */
	width: min(100vw - 12px, 620px, (100vh - var(--chrome)) * var(--board-ar));
	width: min(100vw - 12px, 620px, (100dvh - var(--chrome)) * var(--board-ar));
}

#arena {
	position: relative;
	width: 100%;
	aspect-ratio: 520 / 760;
	touch-action: none;
}

canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 18px;
	box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2), 0 0 50px rgba(0, 212, 255, 0.1),
		0 20px 70px rgba(0, 0, 0, 0.8);
}

/* ══ Stat Panels — horizontal bars ══ */
.stat-panel {
	width: 100%;
	flex-shrink: 0;
	padding: 7px 12px;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.stat-head {
	display: flex;
	align-items: baseline;
	gap: 9px;
	min-width: 74px;
	flex-shrink: 0;
}

.stat-name {
	font-family: "Orbitron", monospace;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 3px;
}

.stat-score {
	font-family: "Orbitron", monospace;
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	letter-spacing: -1px;
}

.stat-rows {
	display: flex;
	flex: 1;
	justify-content: space-around;
	align-items: center;
	gap: 4px;
	border-left: 1px solid rgba(255, 255, 255, 0.07);
	border-right: 1px solid rgba(255, 255, 255, 0.07);
	padding: 0 6px;
}

.stat-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.stat-label {
	font-family: "Rajdhani", sans-serif;
	font-weight: 500;
	font-size: 8px;
	letter-spacing: 1.2px;
	color: rgba(255, 255, 255, 0.3);
	text-transform: uppercase;
	white-space: nowrap;
}

.stat-val {
	font-family: "Orbitron", monospace;
	font-weight: 700;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}

.stat-footer {
	font-family: "Rajdhani", sans-serif;
	font-weight: 500;
	font-size: 8px;
	line-height: 1.25;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.2);
	text-align: center;
	text-transform: uppercase;
	min-width: 30px;
	flex-shrink: 0;
}

/* ══ Credit ══ */
#credit {
	font-family: "Rajdhani", sans-serif;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.25);
	text-align: center;
	line-height: 1;
	padding-top: 2px;
}
#credit a {
	color: var(--blue);
	text-decoration: none;
	cursor: pointer;
	text-shadow: 0 0 10px rgba(0, 212, 255, 0.45);
	transition: color 0.2s, text-shadow 0.2s;
}
#credit a:hover,
#credit a:focus-visible {
	text-shadow: 0 0 16px var(--blue), 0 0 34px rgba(0, 212, 255, 0.55);
}
#credit a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ══ Screens ══ */
#ui {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 18px;
	overflow: hidden;
}

.screen {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	background: rgba(4, 6, 10, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 18px;
}
.screen.on {
	opacity: 1;
	pointer-events: all;
}

/* ══ Game Over ══ */
.go-inner {
	text-align: center;
	padding: 0 14px;
}

.go-face {
	font-size: clamp(44px, 13vw, 60px);
	line-height: 1;
	margin-bottom: 8px;
	display: block;
	animation: facePop 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes facePop {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	65% {
		transform: scale(1.25);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.go-who {
	font-size: clamp(30px, 9vw, 52px);
	font-weight: 900;
	line-height: 1;
}

.go-wins {
	font-family: "Rajdhani", sans-serif;
	font-weight: 300;
	font-size: clamp(11px, 3.2vw, 16px);
	letter-spacing: 6px;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 6px;
}

.go-final {
	font-size: clamp(22px, 6vw, 28px);
	font-weight: 700;
	color: var(--gold);
	text-shadow: 0 0 20px var(--gold);
	margin: 12px 0 24px;
}

button {
	padding: 13px 38px;
	background: transparent;
	border: 2px solid var(--blue);
	color: var(--blue);
	font-family: "Orbitron", monospace;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 3px;
	cursor: pointer;
	clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
	transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
button:hover {
	background: var(--blue);
	color: #000;
	box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}

.go-btns {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

#btn-menu {
	padding: 13px 24px;
	border-color: rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.55);
}
#btn-menu:hover {
	background: rgba(255, 255, 255, 0.9);
	color: #000;
	box-shadow: none;
}

#gameover-screen.lose-state {
	background: rgba(20, 4, 8, 0.9);
}

/* ══ Mode picker ══ */
.ready-inner {
	text-align: center;
	padding: 0 14px;
}

.ready-logo {
	font-weight: 900;
	font-size: clamp(34px, 11vw, 54px);
	line-height: 0.92;
	color: #fff;
}
.ready-logo span {
	display: block;
	color: var(--blue);
	text-shadow: 0 0 30px var(--blue), 0 0 70px rgba(0, 212, 255, 0.35);
}

.ready-sub {
	font-family: "Rajdhani", sans-serif;
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 8px;
	color: var(--gold);
	margin: 8px 0 26px;
	text-indent: 8px;
}

.mode-picker {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.mode-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 215px;
	padding: 13px 28px;
}
.mode-btn em {
	font-family: "Rajdhani", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 9px;
	letter-spacing: 2px;
	color: rgba(255, 255, 255, 0.35);
	text-transform: uppercase;
	transition: color 0.2s;
}
.mode-btn:hover em {
	color: rgba(0, 0, 0, 0.55);
}
.mode-btn.alt {
	border-color: var(--red);
	color: var(--red);
}
.mode-btn.alt:hover {
	background: var(--red);
	color: #000;
	box-shadow: 0 0 30px rgba(255, 45, 85, 0.5);
}

.ready-keys {
	margin-top: 22px;
	font-family: "Rajdhani", sans-serif;
	font-weight: 300;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.25);
}

/* ══ 2-player ══ */
/* Flip P2's panel so it reads right way up from their side of the phone. */
body.duo #stat-top {
	transform: rotate(180deg);
}

button:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.4;
	}
	50% {
		opacity: 1;
	}
}

/* ══ Very small screens — trim the panel chrome ══ */
@media (max-width: 380px) {
	.stat-footer {
		display: none;
	}
	.stat-score {
		font-size: 27px;
	}
	.stat-head {
		min-width: 62px;
	}
}

/* ══ Landscape phones — warn instead of squashing ══ */
@media (max-height: 480px) and (orientation: landscape) {
	:root {
		--chrome: 132px;
	}
	.stat-panel {
		padding: 4px 10px;
	}
	.stat-score {
		font-size: 24px;
	}
}