# Quickstart: Fix Zero-HP Opacity

**Feature**: 020-fix-zero-hp-opacity
**Date**: 2026-03-06

## Problem

When a combatant reaches 0 HP, the entire row gets `opacity-50` applied to the outermost container. This cascades to absolutely-positioned child elements (HP adjust popover and condition picker dropdown), making them semi-transparent and hard to use.

## Fix Location

**Single file**: `apps/web/src/components/combatant-row.tsx`

## Fix Strategy

1. Remove `opacity-50` from the outer row `<div>` (line 312).
2. Apply `opacity-50` to individual leaf/display elements within the row when `status === "unconscious"`:
   - Initiative input
   - Name display
   - AC display
   - HP current value button (inside `ClickableHp`)
   - HP separator slash
   - Max HP display
   - Concentration button
   - Condition tags
   - Remove button
3. The `HpAdjustPopover` and `ConditionPicker` components — which are absolutely positioned overlays — are **not** wrapped in any dimmed container, so they render at full opacity.

## Key Constraint

CSS `opacity` on a parent element creates a stacking context that affects all children. There is no way to "undo" a parent's opacity on a child element. The fix must ensure popovers are never DOM descendants of an element with reduced opacity.

## Verification

```bash
pnpm --filter web dev   # Start dev server
# 1. Add a combatant, set max HP, reduce current HP to 0
# 2. Click HP value — popover should appear at full opacity
# 3. Click conditions area — picker should appear at full opacity
# 4. Row content (name, initiative, etc.) should still appear dimmed
```

## Quality Gate

```bash
pnpm check   # Must pass before commit
```