Chart Prompts

Restyle my chart in the "Shelf Plays" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a cozy collection page for a family's board game shelf: deep bottle green, warm amber highlights, little box-art tiles at the ends of the bars. Friendly but carefully typeset.

Colors (use these exact values):
- Page: #0F2A22 (bottle green).
- Highlighted top items: #E9A23B (warm amber). All other bars: #7BA392 (soft sage).
- Title and top labels: #F3EBD8 (cream); ordinary names #DCE5DD. Secondary text: #8FA39A. Gridlines: #1D3F34.
- Box-art tiles: muted fills such as #4F7A8C, #6D7F4B, #A0664F, #5C6E8A, #8A6A4A, #7C5C8A, one per item.

Typography (Google Fonts):
- Alegreya 700 for the title (34px, #F3EBD8, sentence case, stating the finding).
- Nunito for everything else: eyebrow 11px 800 uppercase with 2.4px letter-spacing in amber; subtitle 14px #8FA39A with measure, period and a computed share; names 15px (800 cream for highlighted rows, 600 #DCE5DD otherwise); small attribute column (e.g. player counts "2–4") 11px #8FA39A right-aligned under a 9px 700 uppercase header; value labels 14px (800 amber for highlighted, 700 cream otherwise); axis labels 11px; source 11px.

Layout:
- 56px margins. Eyebrow at y 48, title at y 92, subtitle at y 120. Rows start at y 166, 32px apart. Names from x 56, the attribute column ending at x 274, bars from x 300 with room at the right for tile and value.

Axes and grid:
- No axis lines. Vertical gridlines 1px #1D3F34 at round values behind the bars, labeled 11px #8FA39A below the last row, with a unit word at the far right.

Marks:
- Bar chart: horizontal bars 14px tall with a 2px radius on the right end only, sorted descending; the top three amber, the rest sage. 5px past each bar end, a 21 x 26 box-art tile (4px radius, muted fill, 1px border in amber for highlighted rows or #3E5F53 otherwise) with an inner 15 x 20 frame (cream at 35% opacity, 0.8px) and a tiny cream motif (circle, leaf, rails, crescent, diamond or wave). The value follows 30px past the tile's left edge.
- Line chart: 2.5px sage lines with the top series in amber at 3px, each line ending in the same box-art tile with its value beside it; vertical gridlines as above.

Avoid: saturated greens, gradients, shadows, thick borders, and letting a tile or value overlap another row.

When you're done, render the chart and check that bar length (not bar plus tile) encodes the value, the top three are the three largest, the computed share in the subtitle is right, and tiles sit vertically centered on their bars.