/* ============================================================
   GOOGLE FONTS
   Includes the retro “Press Start 2P” font used in UI + counter.
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* ============================================================
   ROOT THEME VARIABLES
   These define the global color palette and Pokéball defaults.
   Each theme (Great / Ultra / Love / Dusk) overrides some of these.
============================================================ */
:root {
	/* Background gradient for controller page */
	--bg-top: #ff4d4d;
	--bg-mid: #c90000;
	--bg-bottom: #111111;

	/* Button accent colors */
	--accent: #ff1c1c;
	--accent-hover: #ff4b4b;

	/* Reset button color scheme */
	--reset: #ffcd38;
	--reset-hover: #ffd95e;

	/* Default Pokéball colors */
	--ball-top: #e53935;
	--ball-bottom: #f5f5f5;
	--ball-midline: #111111;
	--ball-button: #f5f5f5;
	--ball-button-inner: #dcdcdc;
}

/* ============================================================
   GLOBAL RESET
   Removes default padding/margins and simplifies box sizing.
============================================================ */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ============================================================
   PAGE LAYOUT
   Full-screen center alignment, background gradient.
============================================================ */
body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;

	background: radial-gradient(
		circle at top,
		var(--bg-top) 0,
		var(--bg-mid) 35%,
		var(--bg-bottom) 100%
	);

	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #111;
}

/* ============================================================
   MAIN APP CONTAINER
   Card-style panel that contains all controller UI elements.
============================================================ */
#app {
	background: #f8f8f8;
	border-radius: 16px;
	border: 4px solid #111;
	box-shadow: 0 8px 0 #222;

	padding: 24px 18px;
	width: min(420px, 90vw);
}