:root{ --muted:#94a3b8; }
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:linear-gradient(180deg,#071024 0%, #071a2a 100%);color:#e6eef6}
.container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px}
.title{text-align:center;margin-bottom:12px}
.title h1{font-size:36px;margin:0;letter-spacing:1px}
.title .tagline{margin:6px 0 0;color:var(--muted)}
.game-wrap{width:100%;max-width:820px;display:flex;flex-direction:column;align-items:center}

/* Reserve the exact game area before p5 creates the canvas */
#game-holder{
	background:transparent;
	padding:0;
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	width: min(100%, 600px);
	max-width: 600px;
	aspect-ratio: 600 / 400;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

canvas{display:block;border-radius:8px;cursor:default}

.controls{margin:8px auto 0;color:var(--muted);text-align:center;font-size:12px;line-height:1.5;padding-top:8px;border-top:1px solid rgba(255,255,255,0.03);width:min(100%,600px);max-width:600px}

/* ensure the p5 canvas fills the reserved holder and stays responsive */
#game-holder > canvas{width:100%;height:100%;max-width:none;max-height:none;display:block}

/* subtle placeholder styling shown before the canvas is created */
#p5_loading{
	color:var(--muted);
	font-size:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	text-align:center;
	padding:0;
	margin:0;
}

@media (max-width:420px){.title h1{font-size:28px}}