/* ============================================================
   BASE POKÉBALL STRUCTURE
   Layout, shape, and UI elements common to all ball themes.
============================================================ */

#pokeball-panel {
	display: flex;
	justify-content: center;
	align-items: center;
}

#pokeball {
	position: relative;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	border: 6px solid #111;
	overflow: hidden;
	box-shadow: 0 8px 0 #222;
	background: transparent;
}

/* ---------- Upper half of the Pokéball ---------- */
#pokeball-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: var(--ball-top);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	padding-top: 42px;
	gap: 6px;
	z-index: 1;
}

/* ---------- Text inside the ball (name + counter) ---------- */
#pokeName {
	font-family: "Press Start 2P", system-ui;
	font-size: 0.8rem;
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 2px 0 #000;
	text-transform: uppercase;
	max-width: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 6px;
}

#pokeCount {
	font-family: "Press Start 2P", system-ui;
	font-size: 1.05rem;
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 2px 0 #000;
}

/* ---------- Lower half of the Pokéball ---------- */
#pokeball-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: var(--ball-bottom);
}

/* ---------- Horizontal center band ---------- */
#pokeball-midline {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 18px;
	background: var(--ball-midline);
	z-index: 2;
}

/* ---------- Pokéball center button ---------- */
#pokeball-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--ball-button);
	border: 8px solid #111;
	z-index: 3;
	cursor: pointer;
	box-shadow: inset 0 0 0 8px #fff, 0 6px 0 #111;
}

#pokeball-button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ball-button-inner);
	border: 4px solid #111;
}

/* ---------- Button press feedback animation ---------- */
#pokeball-button.pressed {
	animation: pokeball-press 140ms ease;
}

@keyframes pokeball-press {
	0% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(0.92);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

/* ---------- Slight shake animation for button press ---------- */
#pokeball.shake {
	animation: pokeball-shake 220ms ease;
}

@keyframes pokeball-shake {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-6deg);
	}
	50% {
		transform: rotate(6deg);
	}
	75% {
		transform: rotate(-4deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

/* ============================================================
   SPECIAL BALL THEMES / TOP-HALF DECALS
============================================================ */

/* ============================================================
   GREAT BALL
   Blue top, thin black cap line, two red wings.
============================================================ */
:root[data-theme="greatball"] #pokeball-top {
	background-color: #2060ff;
	background-image: linear-gradient(to bottom, #2060ff 0 12px, transparent 12px),
		radial-gradient(circle at 0% 6%, #e53935 0 58px, transparent 59px),
		radial-gradient(circle at 100% 6%, #e53935 0 58px, transparent 59px);
	background-repeat: no-repeat;
}

/* ============================================================
   ULTRA BALL
   Black top with gold stripes.
============================================================ */
:root[data-theme="ultraball"] #pokeball-top {
	background: linear-gradient(to bottom, #f9cf2f 0 20px, transparent 20px),
		linear-gradient(
			to right,
			transparent 0 20%,
			#f9cf2f 20% 33%,
			transparent 33% 67%,
			#f9cf2f 67% 80%,
			transparent 80% 100%
		),
		var(--ball-top);
	background-repeat: no-repeat;
}

/* ============================================================
   LOVE BALL
   Pink top + centered heart decal.
============================================================ */

/* Heart background */
:root[data-theme="loveball"] #pokeball-top {
	--love-bg: #ff6fb2;
	background: var(--love-bg) !important;

	position: relative;
	overflow: hidden;
	border-top-left-radius: 999px;
	border-top-right-radius: 999px;
}

/* Heart shape using layered gradients */
:root[data-theme="loveball"] #pokeball-top::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 30px;
	transform: translateX(-50%);

	width: 70px;
	aspect-ratio: 1;

	--c: #ff2b7d;
	background: radial-gradient(at 70% 31%, var(--c) 29%, #0000 30%),
		radial-gradient(at 30% 31%, var(--c) 29%, #0000 30%),
		conic-gradient(from -45deg at 50% 84%, var(--c) 90deg, #0000 0) bottom / 100% 50% no-repeat;

	pointer-events: none;
	z-index: 1;
}

/* Prevent text from being hidden under the heart */
:root[data-theme="loveball"] #pokeName,
:root[data-theme="loveball"] #pokeCount {
	position: relative;
	z-index: 2;
}

/* ============================================================
   DUSK BALL
   Black top with green arcs and green inner glow.
============================================================ */

:root[data-theme="duskball"] #pokeball {
	--dusk-green: #2cff52;
	--dusk-black: #050505;

	background-color: var(--dusk-black) !important;

	background-image: radial-gradient(circle at 50% 50%, var(--dusk-green) 0 60px, transparent 61px),
		radial-gradient(circle at 50% -45%, var(--dusk-green) 0 135px, transparent 136px),
		radial-gradient(circle at 50% 145%, var(--dusk-green) 0 135px, transparent 136px),
		radial-gradient(circle at -45% 50%, var(--dusk-green) 0 135px, transparent 136px),
		radial-gradient(circle at 145% 50%, var(--dusk-green) 0 135px, transparent 136px);

	background-repeat: no-repeat;
}

/* Hide standard halves so arcs show */
:root[data-theme="duskball"] #pokeball-top,
:root[data-theme="duskball"] #pokeball-bottom {
	background: transparent !important;
}

/* Red horizontal band */
:root[data-theme="duskball"] #pokeball-midline {
	background: #e40808 !important;
	box-shadow: inset 0 3px 0 #111, inset 0 -3px 0 #111;
}

/* Red button & ring */
:root[data-theme="duskball"] #pokeball-button {
	background: #e40808 !important;
	border-color: #111 !important;
	box-shadow: inset 0 0 0 8px #ff3b3b, 0 6px 0 #111 !important;
}

:root[data-theme="duskball"] #pokeball-button::after {
	background: #b80000 !important;
	border-color: #111 !important;
}