diff --git a/apps/web/src/components/__tests__/combatant-row.test.tsx b/apps/web/src/components/__tests__/combatant-row.test.tsx
index fcac89e..933990d 100644
--- a/apps/web/src/components/__tests__/combatant-row.test.tsx
+++ b/apps/web/src/components/__tests__/combatant-row.test.tsx
@@ -373,6 +373,26 @@ describe("CombatantRow", () => {
 			).toBeInTheDocument();
 		});
 
+		it("popover is not dimmed when the combatant is downed", async () => {
+			const user = userEvent.setup();
+			renderRow({
+				combatant: {
+					id: combatantId("1"),
+					name: "Goblin",
+					maxHp: 10,
+					currentHp: 0,
+				},
+			});
+
+			await user.click(screen.getByLabelText(CURRENT_HP_REGEX));
+			// The row dims downed combatants with opacity-50, which would cascade
+			// to the popover if it rendered inside the dimmed subtree.
+			const popover = screen
+				.getByRole("button", { name: "Apply damage" })
+				.closest(".opacity-50");
+			expect(popover).toBeNull();
+		});
+
 		it("HP section is absent when maxHp is undefined", () => {
 			renderRow({
 				combatant: {
diff --git a/apps/web/src/components/__tests__/hp-adjust-popover.test.tsx b/apps/web/src/components/__tests__/hp-adjust-popover.test.tsx
index 387a935..d8d8c8d 100644
--- a/apps/web/src/components/__tests__/hp-adjust-popover.test.tsx
+++ b/apps/web/src/components/__tests__/hp-adjust-popover.test.tsx
@@ -3,11 +3,41 @@ import "@testing-library/jest-dom/vitest";
 
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { useEffect, useRef, useState } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { HpAdjustPopover } from "../hp-adjust-popover";
 
 afterEach(cleanup);
 
+function AnchoredPopover({
+	onAdjust,
+	onSetTempHp,
+	onClose,
+}: Readonly<{
+	onAdjust: (delta: number) => void;
+	onSetTempHp: (value: number) => void;
+	onClose: () => void;
+}>) {
+	const anchorRef = useRef<HTMLDivElement>(null);
+	// The popover opens on click in the app, so its anchor is always mounted
+	// first. Mirror that here — otherwise the anchor ref is still null when the
+	// popover measures its position and it renders hidden.
+	const [open, setOpen] = useState(false);
+	useEffect(() => setOpen(true), []);
+	return (
+		<div ref={anchorRef}>
+			{!!open && (
+				<HpAdjustPopover
+					anchorRef={anchorRef}
+					onAdjust={onAdjust}
+					onSetTempHp={onSetTempHp}
+					onClose={onClose}
+				/>
+			)}
+		</div>
+	);
+}
+
 function renderPopover(
 	overrides: Partial<{
 		onAdjust: (delta: number) => void;
@@ -19,7 +49,7 @@ function renderPopover(
 	const onSetTempHp = overrides.onSetTempHp ?? vi.fn();
 	const onClose = overrides.onClose ?? vi.fn();
 	const result = render(
-		<HpAdjustPopover
+		<AnchoredPopover
 			onAdjust={onAdjust}
 			onSetTempHp={onSetTempHp}
 			onClose={onClose}
diff --git a/apps/web/src/components/combatant-row.tsx b/apps/web/src/components/combatant-row.tsx
index 220a956..9adb742 100644
--- a/apps/web/src/components/combatant-row.tsx
+++ b/apps/web/src/components/combatant-row.tsx
@@ -202,6 +202,7 @@ function ClickableHp({
 	onSetTempHp: (value: number) => void;
 }>) {
 	const [popoverOpen, setPopoverOpen] = useState(false);
+	const anchorRef = useRef<HTMLDivElement>(null);
 	const status = deriveHpStatus(currentHp, maxHp);
 
 	if (maxHp === undefined) {
@@ -209,7 +210,7 @@ function ClickableHp({
 	}
 
 	return (
-		<div className="relative flex items-center">
+		<div ref={anchorRef} className="relative flex items-center">
 			<button
 				type="button"
 				onClick={() => setPopoverOpen(true)}
@@ -230,6 +231,7 @@ function ClickableHp({
 			)}
 			{!!popoverOpen && (
 				<HpAdjustPopover
+					anchorRef={anchorRef}
 					onAdjust={onAdjust}
 					onSetTempHp={onSetTempHp}
 					onClose={() => setPopoverOpen(false)}
diff --git a/apps/web/src/components/hp-adjust-popover.tsx b/apps/web/src/components/hp-adjust-popover.tsx
index cbec19e..6e27c78 100644
--- a/apps/web/src/components/hp-adjust-popover.tsx
+++ b/apps/web/src/components/hp-adjust-popover.tsx
@@ -6,18 +6,21 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { createPortal } from "react-dom";
 import { useClickOutside } from "../hooks/use-click-outside.js";
 import { Input } from "./ui/input";
 
 const DIGITS_ONLY_REGEX = /^\d+$/;
 
 interface HpAdjustPopoverProps {
+	readonly anchorRef: React.RefObject<HTMLElement | null>;
 	readonly onAdjust: (delta: number) => void;
 	readonly onSetTempHp: (value: number) => void;
 	readonly onClose: () => void;
 }
 
 export function HpAdjustPopover({
+	anchorRef,
 	onAdjust,
 	onSetTempHp,
 	onClose,
@@ -29,10 +32,9 @@ export function HpAdjustPopover({
 
 	useLayoutEffect(() => {
 		const el = ref.current;
-		if (!el) return;
-		const parent = el.parentElement;
-		if (!parent) return;
-		const trigger = parent.getBoundingClientRect();
+		const anchor = anchorRef.current;
+		if (!el || !anchor) return;
+		const trigger = anchor.getBoundingClientRect();
 		const popover = el.getBoundingClientRect();
 		const vw = document.documentElement.clientWidth;
 		let left = trigger.left;
@@ -43,7 +45,7 @@ export function HpAdjustPopover({
 			left = 8;
 		}
 		setPos({ top: trigger.bottom + 4, left });
-	}, []);
+	}, [anchorRef]);
 
 	useEffect(() => {
 		requestAnimationFrame(() => inputRef.current?.focus());
@@ -82,10 +84,10 @@ export function HpAdjustPopover({
 		[applyDelta, onClose],
 	);
 
-	return (
+	return createPortal(
 		<div
 			ref={ref}
-			className="card-glow fixed z-10 rounded-lg border border-border bg-background p-2"
+			className="card-glow fixed z-50 rounded-lg border border-border bg-background p-2"
 			style={
 				pos
 					? { top: pos.top, left: pos.left }
@@ -144,6 +146,7 @@ export function HpAdjustPopover({
 					<ShieldPlus size={14} />
 				</button>
 			</div>
-		</div>
+		</div>,
+		document.body,
 	);
 }