Reaktionstest

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive single-screen German reaction-time web game titled "Reaktionstest". Use a dark navy aesthetic with a centered rounded card on a subtle radial-gradient background, light text, blue-gray borders, and soft shadow. The page should fit within the viewport without scrolling. At the top of the card show the large heading "Reaktionstest" and subtitle "Drücke die Leertaste zweimal so schnell wie möglich." Below it place a large rounded rectangular interactive arena, initially dark slate blue (#253052) with a blue-gray border. Center large bold text "Bereit?" with the smaller hint "Drücke die Leertaste zum Starten." The arena is clickable/tappable and should also respond to the Space key; prevent the browser's default Space behavior.

Implement this exact two-press reaction mechanic: initially phase is idle. On the first Space press, click/tap on the arena, or click of the full-width start button, immediately start timing with a high-resolution timer (performance.now), change the arena to bright green (#20a65a) with a pale green border and a very slight scale-up, and change the centered text to "Nochmal drücken!" with hint "Drücke die Leertaste jetzt sofort wieder." On the second Space press, arena tap, or button click, stop the timer, round elapsed milliseconds to the nearest integer, show that value as the main arena message formatted like "237 ms", and show a performance hint: "Sehr schnell!" when under 250 ms, "Stark reagiert." when under 400 ms, otherwise "Noch ein Versuch?". Set the arena to a blue result state (#2e3c6d), update the button text to "Nochmal testen", and return to idle so another first press starts a new test. There is no random delay or false-start state in the actual mechanics: the green state begins immediately on the first press.

Below the arena, show a two-column stats row with two dark navy panels, rounded borders, and labels in uppercase spaced lettering: "LETZTE ZEIT" and "BESTE ZEIT". Initially both values are an em dash "—". After a completed test, show the latest result as e.g. "237 ms" and retain the lowest result as the best time. Persist the best time in localStorage under the key "reaction-best" so it survives reloads. The best value should update whenever a faster result is achieved. Add a full-width mint-green rounded button beneath the stats, with dark bold text, initially labeled "Mit Leertaste starten"; it performs the same action as pressing Space. Add footer instructions: "Leertaste 1× starten · Leertaste 2× so schnell wie möglich drücken · R zurücksetzen" in small muted blue-gray text.

Support the R key globally: clear last and best times, remove the reaction-best localStorage entry, reset the arena to its initial dark slate state, restore "Bereit?" and "Drücke die Leertaste zum Starten.", reset the button label to "Mit Leertaste starten", and display em dashes in both stat values. Use a clean system/Inter-like sans-serif font, responsive sizing with a card width capped around 680px and horizontal padding around 20px; on small screens reduce the arena height slightly. The visual composition should match a polished dark dashboard: card border #3b4b78, card background near-transparent #0d1326, 24px card corners, arena around 250px tall with 20px corners, stats with 14px corners, and button with 14px corners. The page title in the document should be "Reaktionstest".