Fix concentration glow clipping at container edges

Add padding to the inner combatant list container so the box-shadow glow
from the concentration-damage animation renders fully on all sides,
preventing clipping by the scrollable parent's implicit overflow-x.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

specs/033-fix-concentration-glow-clip/research.md

@@ -0,0 +1,35 @@
+# Research: Fix Concentration Glow Clipping
+
+## Root Cause Analysis
+
+### Decision: The glow is clipped by the scrollable parent container's implicit overflow-x
+
+**Rationale**: The combatant list is wrapped in a `<div className="flex-1 overflow-y-auto min-h-0">` (App.tsx:157). Per the CSS specification, when one overflow axis is set to a non-`visible` value (here `overflow-y: auto`), the other axis (`overflow-x`) computes to `auto` rather than remaining `visible`. This creates a clipping context that cuts off the `box-shadow` from the `concentration-glow` animation on the left and right edges.
+
+The glow is defined as:
+```css
+box-shadow: 0 0 4px 2px #c084fc;
+```
+This extends ~6px outward from the combatant row element. The parent's implicit `overflow-x: auto` clips this outward extension.
+
+**Alternatives considered**:
+- `border-radius` on the row causing clipping — rejected; `border-radius` shapes `box-shadow` but does not clip it
+- `translate` in the shake animation pushing the element off-screen — rejected; max displacement is only 3px and returns to 0
+
+## Fix Strategy
+
+### Decision: Add horizontal padding to the scrollable container to accommodate the glow spread
+
+**Rationale**: The simplest fix is to add left/right padding to the scrollable container (or its inner flex-col child) so the `box-shadow` has room to render within the overflow area without being clipped. This avoids changing the overflow behavior (which is needed for vertical scrolling) and avoids restructuring the component hierarchy.
+
+The glow spread is `4px blur + 2px spread = ~6px` outward. Adding `px-2` (8px) padding to the inner `<div className="flex flex-col pb-2">` at App.tsx:158 would provide enough space.
+
+**Alternatives considered**:
+1. **Change `overflow-y-auto` to `overflow-y-scroll` + `overflow-x-visible`** — rejected; CSS spec still forces `overflow-x` to `auto` when `overflow-y` is non-`visible`
+2. **Use `outline` instead of `box-shadow`** — viable but changes the visual appearance; `outline` doesn't respect `border-radius` in all browsers
+3. **Use `inset box-shadow`** — would avoid overflow clipping but changes the visual effect from an outer glow to an inner glow
+4. **Negative margin + padding trick on the scrollable container** — more complex, same net effect as simple padding
+
+### Decision: Verify no horizontal scrollbar is introduced
+
+**Rationale**: Adding padding to the inner container should not cause a horizontal scrollbar since the content still fits within the parent. The `box-shadow` renders in the padding area but does not affect layout (box-shadow is a paint-only effect, not a layout-affecting property). No additional `overflow-x: hidden` should be needed.