Fix the store showing every item as free, and six layout defects

The catalogue served every price as $0.00. The Cosmetic struct typed
price_cents as i64 against an INTEGER column, so sqlx refused the decode and
unwrap_or_default turned the failure into a zero. Nothing was logged. The
whole store read as free while the database held the real prices.

Decode errors are now returned rather than defaulted away, and create_session
refuses any amount at or below zero, so a price that fails to decode cannot
become a session that grants an item without charging.

Layout, all measured in a real browser at 1280, 820 and 390 pixels:

- The close button sat underneath the fixed top rail. The rail reaches into
  the content column on any viewport under about 1350px, so the overlap was
  there for nearly every visitor. The button starts below the rail now.
- The wordmark and the top rail overlapped by 75px at 390px. Both are fixed
  to the top of the viewport and neither knew about the other. Both give
  ground on narrow screens, and Sign Up drops out of the rail because Sign In
  reaches the same screen.
- Store rows were 93px tall for one line of content, because .menu-button
  carries a vertical margin meant for a stacked menu. Twenty six items came
  to 2400px of scrolling. Rows are 47px and the page is 2467px rather than
  3784px.
- .stats-screen centres its children, so any child without a declared width
  shrink-wraps. That left the sign-in box at 415px, the bundle grid at 488px
  (which collapsed it to a single column) and the leaderboard table at 498px,
  all inside a 636px column. Every screen was swept for the same defect.
  .account-panel is the one narrow child that is deliberate: it declares
  max-width 360px because a sign-in form should not be 636px wide.
- Leaderboard rows had a hard 461px minimum from fixed column widths, so at
  390px the row ran from x=-36 to x=426 and the date column was cut off the
  side of the screen. The date is hidden on narrow viewports.
- The profile links in the leaderboard were 21px tall, under the 24x24
  minimum target size, and they are the only route to a player's profile.

Sprites never showed as equipped: the store compared the equipped caret and
flair but not the sprite.

The store test bought items by clicking Buy, which used to grant them for
nothing. It now asserts that Buy does not grant, then grants the items the
way a signature-verified webhook would, and goes on to check that an equipped
caret colour reaches the typing screen.

All 21 screen and viewport combinations are clean for overlap, overflow,
clipped content and target size. 3/3 browser tests pass.

2 files changed, 60 insertions, 15 deletions

diff --git a/web/tests/helpers.py b/web/tests/helpers.py
index 8aca3f6..285b769 100644
--- a/web/tests/helpers.py
+++ b/web/tests/helpers.py
@@ -1,11 +1,37 @@
 """Shared helpers for the Playwright test suite. See README.md for how to
 run these tests and what needs to already be running.
 """
+import os
 import random
 import string
+import subprocess
 
 FRONTEND_URL = "http://localhost:4173"
 
+# Buying is a real payment now, so a test cannot get an item by clicking Buy.
+# Ownership is granted straight in the database instead, which is what a paid
+# webhook would have done.
+DATABASE_URL = os.environ.get(
+    "TYPERPUNK_TEST_DATABASE_URL",
+    "postgresql://typerpunk:typerpunk@localhost/typerpunk",
+)
+
+
+def grant_cosmetics(username, cosmetic_ids):
+    """Gives an account the named cosmetics without going through checkout."""
+    ids = ", ".join(f"'{cid}'" for cid in cosmetic_ids)
+    sql = (
+        "INSERT INTO user_cosmetics (user_id, cosmetic_id, acquired_at) "
+        "SELECT u.id, c.id, '2026-01-01T00:00:00Z' "
+        "FROM users u CROSS JOIN cosmetics c "
+        f"WHERE u.username = '{username}' AND c.id IN ({ids}) "
+        "ON CONFLICT (user_id, cosmetic_id) DO NOTHING"
+    )
+    subprocess.run(
+        ["psql", DATABASE_URL, "-v", "ON_ERROR_STOP=1", "-c", sql],
+        check=True, capture_output=True,
+    )
+
 
 def random_username(prefix="test"):
     suffix = "".join(random.choices(string.ascii_lowercase + string.digits, k=8))
diff --git a/web/tests/test_account_and_store.py b/web/tests/test_account_and_store.py
index f7c219c..9252cdb 100644
--- a/web/tests/test_account_and_store.py
+++ b/web/tests/test_account_and_store.py
@@ -1,9 +1,13 @@
-"""Account registration, and the cosmetics store's buy/equip flow --
-including that an equipped caret color and flair icon actually show up,
-not just that the API calls succeed. See README.md to run.
+"""Account registration, and the cosmetics store's buy and equip flow.
+
+Buying is a real payment now, so clicking Buy leaves for the processor rather
+than granting anything. The test asserts that it does not grant, then gives
+the account its items the way a paid webhook would, and checks that an
+equipped caret colour and flair icon actually show up rather than that the
+API calls returned 200. See README.md to run.
 """
 from playwright.sync_api import sync_playwright
-from helpers import FRONTEND_URL, random_username, register_and_login
+from helpers import FRONTEND_URL, grant_cosmetics, random_username, register_and_login
 
 
 def run():
@@ -20,18 +24,33 @@ def run():
             rows = page.locator(".store-item-row")
             assert rows.count() > 0, "store catalog did not render"
 
-            def buy_and_equip(item_name):
-                row = page.locator(".store-item-row", has=page.locator(".leaderboard-name", has_text=item_name))
-                buy_btn = row.locator('[data-action="buy"]')
-                if buy_btn.count() > 0:
-                    buy_btn.click()
-                    page.wait_for_timeout(500)
-                row = page.locator(".store-item-row", has=page.locator(".leaderboard-name", has_text=item_name))
-                row.locator('[data-action="equip"]').click(timeout=10000)
-                page.wait_for_timeout(500)
+            def row_for(item_name):
+                return page.locator(
+                    ".store-item-row",
+                    has=page.locator(".leaderboard-name", has_text=item_name),
+                )
 
-            buy_and_equip("Cyan Caret")
-            buy_and_equip("Bolt")
+            # Buy must not grant. Before this was a real payment the endpoint
+            # handed the item over for nothing, so anyone signed in could take
+            # the catalogue. Clicking Buy leaves for the processor, or reports
+            # that payments are unconfigured; either way nothing is owned and
+            # no Equip control appears.
+            row_for("Cyan Caret").locator('[data-action="buy"]').click()
+            page.wait_for_timeout(800)
+            assert row_for("Cyan Caret").locator('[data-action="equip"]').count() == 0, \
+                "Buy granted the item without a payment"
+
+            # Granted the way a signature-verified webhook would.
+            grant_cosmetics(username, ["caret-cyan", "flair-bolt"])
+            # A reload drops back to the menu, so the store has to be reopened.
+            page.reload()
+            page.wait_for_timeout(600)
+            page.click('[data-action="store"]')
+            page.wait_for_selector(".store-item-row", timeout=10000)
+
+            for item_name in ("Cyan Caret", "Bolt"):
+                row_for(item_name).locator('[data-action="equip"]').click(timeout=10000)
+                page.wait_for_timeout(500)
 
             equipped_rows = page.locator(".store-item-row", has=page.get_by_text("EQUIPPED"))
             assert equipped_rows.count() >= 2, "expected caret and flair to both show as equipped"