Sort This Table Correctly

Build a sortable data table as one complete HTML file with inline CSS and vanilla JavaScript. No libraries, CDNs, external resources, network requests, storage, or embedded frames. It must work inside an iframe sandboxed with allow-scripts only. Return only the HTML file.

Use exactly this data, in exactly this initial order. Columns are Name, Score, Joined and Tier:
Ada, 42, 2026-03-01, Gold
Bo, (empty), 2026-01-15, Silver
Cy, 7, 2026-11-30, Gold
Di, N/A, 2026-02-28, Bronze
Eve, 42, 2026-07-04, Silver
Fay, 108, 2026-01-15, Bronze
Gus, 7, 2026-05-20, Silver
Hal, 1000, 2026-12-01, Gold

Structure requirements, followed exactly:
- Each body row must carry data-row with the lowercase name, for example data-row="ada".
- Each column header must be a button carrying data-sort with the values name, score, joined or tier.
- Show the current sort state in an element with id="sort-state", containing exactly the column key, a space, and asc or desc, for example: score asc.

Sorting rules that must actually hold:
- Clicking a header sorts ascending; clicking the same header again reverses to descending. Switching columns starts ascending again.
- Score sorts numerically, not as text, so 7 comes before 42 and 108 before 1000.
- Missing scores (the empty value and N/A) always sort to the bottom in both directions. They are not treated as zero and they keep their original relative order among themselves.
- Sorting is stable: rows with equal keys keep their current relative order. With the initial data, ascending by score gives Cy, Gus, Ada, Eve, Fay, Hal, then Bo, Di. Descending by score gives Hal, Fay, Ada, Eve, Cy, Gus, then Bo, Di.
- Joined sorts chronologically, not as strings interpreted through a timezone that shifts the day.
- Name and Tier sort alphabetically, case-insensitively.
- Sorting must be repeatable: clicking back and forth several times must not corrupt the order or lose rows.

Accessibility and layout: header buttons must be keyboard operable and expose aria-sort on the sorted column, the table needs a caption or accessible name, and the whole table should stay readable on a narrow screen with the first rows visible near the top of the page without scrolling.