SoundShelf

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.

Recreate a responsive desktop/mobile music discovery web app titled "SoundShelf". Use a dark near-black navy interface with muted gray text, thin blue-gray borders, rounded panels, and a vivid lime-green accent. On desktop, use a two-column layout: a fixed left sidebar about 220px wide and a main content area, with a fixed bottom player spanning the main area. On mobile, hide the sidebar, make the content single-column, and keep a compact bottom player.

Sidebar: show the brand "SoundShelf" in bold white text with "Shelf" (or the latter portion) lime green. Below it, provide navigation buttons: "⌂ Home" active with a darker rounded background, "◉ Discover", "♡ Favorites", and "▱ Your playlists" in muted text. At the bottom of the sidebar show the small muted copy: "A personal music space for the songs you keep coming back to." Navigation is visual only; Home remains the active item.

Main content: use a subtle radial green-tinted glow near the upper-right fading into the dark background. Header has a small muted greeting "Good evening", a large bold heading "Find your next favorite", and a rounded dark search field with placeholder "Search songs or artists". On desktop place the search field to the right of the heading; on mobile stack it below and make it full width. Searching should filter the song cards by case-insensitive matches against title, artist, or tag as the user types.

Below the header, create a two-panel hero row on desktop and stack it on mobile. The featured panel has a dark green gradient, green border, rounded corners, an uppercase lime eyebrow "FEATURED TRACK", large title "Last Man Standing", muted metadata "Livingston · 3:03", and a lime pill button labeled "▶ Play preview". The second panel is a dark slate card titled "Quick picks", with muted explanatory text "Keep your favorites close and build your own listening library." and pill chips: "Alt pop", "Late night", "Focus", and "New finds". Chips are decorative.

Add a "Made for you" section with a four-column card grid on desktop and two columns on mobile. Each card is a dark rounded panel with a colored gradient cover tile, large centered initials, title, muted artist/tag line, and a full-width dark button labeled "Add to queue". Populate it with these first four songs: "Last Man Standing" — Livingston · Featured, cover initials "LMS"; "Paper Crowns" — Livingston · Single, initials "PC"; "Shadow" — Livingston · A Hometown Odyssey, initials "SH"; and "Fairytale" — Livingston · Lighthouse, initials "FA". Use distinct cover color treatments: green/yellow for the first, burgundy/pink for the second, blue for the third, and brown/gold for the fourth.

Add a second section titled "Livingston essentials" with the same card grid and all eight songs: Last Man Standing (Featured, LMS), Paper Crowns (Single, PC), Shadow (A Hometown Odyssey, SH), Fairytale (Lighthouse, FA), Gravedigger (Single, GR), Glow (Single, GL), Home (Lighthouse, HO), and War (Lighthouse, WA). Every song card's "Add to queue" button should be clickable and should immediately load that song into the bottom player; there is no actual audio required.

Bottom player: make a dark translucent/slate bar with a top border. On the left show a 48px rounded mini cover with a green gradient and musical note, then initially show bold "Nothing playing" and muted "Choose a song to begin". In the center show three controls: muted rewind "↶", a lime circular play button initially displaying "▶", and muted forward "↷"; beneath them show a thin progress bar with dark track and lime fill initially at 0%. On the right show muted small text "Your library · 0:00". When a song is selected from either the featured button or any card, update the player title and artist, set the play state to playing, change the center button to "Ⅱ", and set the progress fill to 28%. Clicking the center button after a song is loaded toggles between playing and paused, changing the icon between "Ⅱ" and "▶"; before a song is loaded it does nothing. Keep the rewind/forward buttons non-functional, matching the source behavior.

Use clean system sans-serif typography, bold compact headings, approximately 18px panel radii, 14px card radii, generous spacing, and CSS gradients rather than photographic album art. Main content should scroll vertically while the player remains visible at the bottom. On screens below roughly 800px, hide the sidebar, stack the hero, use two card columns, reduce cover heights, stack the header, and show only the central play control in the compact player while hiding rewind/forward, progress/right-side details as appropriate to the original responsive layout.