Skip to content
Rival
ModelsCompareBest ForArena
Sign Up
Sign Up

Compare AI vibes, not scores. Side-by-side outputs across the world's best models.

@rival_tips

Explore

  • Compare Models
  • All Models
  • Leaderboard
  • Challenges

Discover

  • AI Creators
  • AI Tools
  • The Graveyard

Developers

  • Developer Hub
  • MCP Server
  • .llmignore
  • Badges
  • RIVAL Datasets

Connect

  • Methodology
  • Sponsor
  • Partnerships
  • Privacy Policy
  • Terms
  • RSS Feed
© 2026 Rival
Rival
ModelsCompareBest ForArena
Sign Up
Sign Up
  1. Home
  2. Challenges
  3. Mini Rhythm Game Snippet
Best AI for:Game DevelopmentInteractive UICreative Coding
Loading...

Compare AI vibes, not scores. Side-by-side outputs across the world's best models.

@rival_tips

Explore

  • Compare Models
  • All Models
  • Leaderboard
  • Challenges

Discover

  • AI Creators
  • AI Tools
  • The Graveyard

Developers

  • Developer Hub
  • MCP Server
  • .llmignore
  • Badges
  • RIVAL Datasets

Connect

  • Methodology
  • Sponsor
  • Partnerships
  • Privacy Policy
  • Terms
  • RSS Feed
© 2026 Rival
Back to Challenges
HardWeb Design

Mini Rhythm Game Snippet

Create a super simple, playable rhythm game.

The Prompt

Create the HTML, CSS, and JavaScript for a playable browser rhythm game snippet. Get creative with the theme, mechanics, and visual style! Keep the design clean and the implementation contained within a single HTML file.

Model Responses

andromeda-alpha logo
Andromeda AlphaMini Rhythm Game Snippet
andromeda-alpha logo
Andromeda Alpha
Mini Rhythm Game Snippet
aurora-alpha logo
Aurora AlphaMini Rhythm Game Snippet
aurora-alpha logo
Aurora Alpha
Mini Rhythm Game Snippet
bert-nebulon-alpha logo
Bert-Nebulon AlphaMini Rhythm Game Snippet
bert-nebulon-alpha logo
Bert-Nebulon Alpha
Mini Rhythm Game Snippet
claude-3-sonnet logo
Claude 3 SonnetMini Rhythm Game Snippet
claude-3-sonnet logo
Claude 3 Sonnet
Mini Rhythm Game Snippet
claude-3.7-sonnet logo
Claude 3.7 SonnetMini Rhythm Game Snippet
claude-3.7-sonnet logo
Claude 3.7 Sonnet
Mini Rhythm Game Snippet
claude-haiku-4.5 logo
Claude Haiku 4.5Mini Rhythm Game Snippet
claude-haiku-4.5 logo
Claude Haiku 4.5
Mini Rhythm Game Snippet
claude-opus-4 logo
Claude Opus 4Mini Rhythm Game Snippet
claude-opus-4 logo
Claude Opus 4
Mini Rhythm Game Snippet
claude-opus-4.1 logo
Claude Opus 4.1Mini Rhythm Game Snippet
claude-opus-4.1 logo
Claude Opus 4.1
Mini Rhythm Game Snippet
claude-opus-4.5 logo
Claude Opus 4.5Mini Rhythm Game Snippet
claude-opus-4.5 logo
Claude Opus 4.5
Mini Rhythm Game Snippet
claude-opus-4.6 logo
Claude Opus 4.6Mini Rhythm Game Snippet
claude-opus-4.6 logo
Claude Opus 4.6
Mini Rhythm Game Snippet
claude-sonnet-4 logo
Claude Sonnet 4Mini Rhythm Game Snippet
claude-sonnet-4 logo
Claude Sonnet 4
Mini Rhythm Game Snippet
claude-sonnet-4.6 logo
Claude Sonnet 4.6Mini Rhythm Game Snippet
claude-sonnet-4.6 logo
Claude Sonnet 4.6
Mini Rhythm Game Snippet
cypher-alpha-free logo
Cypher Alpha (free)Mini Rhythm Game Snippet
cypher-alpha-free logo
Cypher Alpha (free)
Mini Rhythm Game Snippet
deepseek-chat-v3.1 logo
DeepSeek V3.1Mini Rhythm Game Snippet
deepseek-chat-v3.1 logo
DeepSeek V3.1
Mini Rhythm Game Snippet
deepseek-v3.2 logo
DeepSeek V3.2Mini Rhythm Game Snippet
deepseek-v3.2 logo
DeepSeek V3.2
Mini Rhythm Game Snippet
deepseek-v3.2-speciale logo
DeepSeek V3.2 SpecialeMini Rhythm Game Snippet
deepseek-v3.2-speciale logo
DeepSeek V3.2 Speciale
Mini Rhythm Game Snippet
devstral-2512-free logo
Mistral: Devstral 2 2512Mini Rhythm Game Snippet
devstral-2512-free logo
Mistral: Devstral 2 2512
Mini Rhythm Game Snippet
devstral-medium logo
Mistral Devstral MediumMini Rhythm Game Snippet
devstral-medium logo
Mistral Devstral Medium
Mini Rhythm Game Snippet
devstral-small logo
Mistral Devstral Small 1.1Mini Rhythm Game Snippet
devstral-small logo
Mistral Devstral Small 1.1
Mini Rhythm Game Snippet
gemini-1.5-pro logo
Gemini 1.5 ProMini Rhythm Game Snippet
gemini-1.5-pro logo
Gemini 1.5 Pro
Mini Rhythm Game Snippet
gemini-2.5-flash-lite-preview-09-2025 logo
Google: Gemini 2.5 Flash Lite Preview 09-2025Mini Rhythm Game Snippet
gemini-2.5-flash-lite-preview-09-2025 logo
Google: Gemini 2.5 Flash Lite Preview 09-2025
Mini Rhythm Game Snippet
gemini-2.5-flash-preview-09-2025 logo
Google: Gemini 2.5 Flash Preview 09-2025Mini Rhythm Game Snippet
gemini-2.5-flash-preview-09-2025 logo
Google: Gemini 2.5 Flash Preview 09-2025
Mini Rhythm Game Snippet
gemini-2.5-pro-exp logo
Gemini 2.5 Pro ExperimentalMini Rhythm Game Snippet
gemini-2.5-pro-exp logo
Gemini 2.5 Pro Experimental
Mini Rhythm Game Snippet
gemini-3-flash-preview logo
Gemini 3 Flash PreviewMini Rhythm Game Snippet
gemini-3-flash-preview logo
Gemini 3 Flash Preview
Mini Rhythm Game Snippet
gemini-3-pro-preview logo
Gemini 3 Pro PreviewMini Rhythm Game Snippet
gemini-3-pro-preview logo
Gemini 3 Pro Preview
Mini Rhythm Game Snippet
gemini-3.1-pro-preview logo
Gemini 3.1 Pro PreviewMini Rhythm Game Snippet
gemini-3.1-pro-preview logo
Gemini 3.1 Pro Preview
Mini Rhythm Game Snippet
gemma-3-12b-it logo
Gemma 3 12BMini Rhythm Game Snippet
gemma-3-12b-it logo
Gemma 3 12B
Mini Rhythm Game Snippet
gemma-3-27b-it logo
Gemma 3 27BMini Rhythm Game Snippet
gemma-3-27b-it logo
Gemma 3 27B
Mini Rhythm Game Snippet
gemma-3n-e2b-it-free logo
Google: Gemma 3n 2BMini Rhythm Game Snippet
gemma-3n-e2b-it-free logo
Google: Gemma 3n 2B
Mini Rhythm Game Snippet
glm-4-32b logo
Z.AI: GLM 4 32BMini Rhythm Game Snippet
glm-4-32b logo
Z.AI: GLM 4 32B
Mini Rhythm Game Snippet
glm-4.5 logo
Z.AI: GLM 4.5Mini Rhythm Game Snippet
glm-4.5 logo
Z.AI: GLM 4.5
Mini Rhythm Game Snippet
glm-4.5-air logo
Z.AI: GLM 4.5 AirMini Rhythm Game Snippet
glm-4.5-air logo
Z.AI: GLM 4.5 Air
Mini Rhythm Game Snippet
glm-4.6 logo
Z.AI: GLM 4.6Mini Rhythm Game Snippet
glm-4.6 logo
Z.AI: GLM 4.6
Mini Rhythm Game Snippet
glm-4.7 logo
Z.AI: GLM 4.7Mini Rhythm Game Snippet
glm-4.7 logo
Z.AI: GLM 4.7
Mini Rhythm Game Snippet
glm-5 logo
Z.ai: GLM 5Mini Rhythm Game Snippet
glm-5 logo
Z.ai: GLM 5
Mini Rhythm Game Snippet
glm-4.7-flash logo
GLM 4.7 FlashMini Rhythm Game Snippet
glm-4.7-flash logo
GLM 4.7 Flash
Mini Rhythm Game Snippet
gpt-4.5 logo
GPT-4.5Neon Glow Rhythm Party
gpt-4.5 logo
GPT-4.5
Neon Glow Rhythm Party
gpt-4o logo
GPT-4o (Omni)Mini Rhythm Game Snippet
gpt-4o logo
GPT-4o (Omni)
Mini Rhythm Game Snippet
gpt-5 logo
GPT-5Mini Rhythm Game Snippet
gpt-5 logo
GPT-5
Mini Rhythm Game Snippet
gpt-5-codex logo
GPT-5 CodexMini Rhythm Game Snippet
gpt-5-codex logo
GPT-5 Codex
Mini Rhythm Game Snippet
gpt-5-mini logo
GPT-5 MiniMini Rhythm Game Snippet
gpt-5-mini logo
GPT-5 Mini
Mini Rhythm Game Snippet
gpt-5-nano logo
GPT-5 NanoMini Rhythm Game Snippet
gpt-5-nano logo
GPT-5 Nano
No content available for this output.
Mini Rhythm Game Snippet
gpt-5.1 logo
GPT-5.1Mini Rhythm Game Snippet
gpt-5.1 logo
GPT-5.1
Mini Rhythm Game Snippet
gpt-5.1-chat logo
GPT-5.1 ChatMini Rhythm Game Snippet
gpt-5.1-chat logo
GPT-5.1 Chat
Mini Rhythm Game Snippet
gpt-5.1-codex logo
GPT-5.1-CodexMini Rhythm Game Snippet
gpt-5.1-codex logo
GPT-5.1-Codex
Mini Rhythm Game Snippet
gpt-5.1-codex-max logo
GPT-5.1 Codex MaxMini Rhythm Game Snippet
gpt-5.1-codex-max logo
GPT-5.1 Codex Max
Mini Rhythm Game Snippet
gpt-5.1-codex-mini logo
GPT-5.1-Codex-MiniMini Rhythm Game Snippet
gpt-5.1-codex-mini logo
GPT-5.1-Codex-Mini
Mini Rhythm Game Snippet
gpt-5.2 logo
GPT-5.2Mini Rhythm Game Snippet
gpt-5.2 logo
GPT-5.2
Mini Rhythm Game Snippet
gpt-5.2-chat logo
GPT-5.2 ChatMini Rhythm Game Snippet
gpt-5.2-chat logo
GPT-5.2 Chat
Mini Rhythm Game Snippet
gpt-5.2-pro logo
GPT-5.2 ProMini Rhythm Game Snippet
gpt-5.2-pro logo
GPT-5.2 Pro
Mini Rhythm Game Snippet
gpt-oss-120b logo
GPT OSS 120BMini Rhythm Game Snippet
gpt-oss-120b logo
GPT OSS 120B
Mini Rhythm Game Snippet
gpt-oss-20b logo
GPT OSS 20BMini Rhythm Game Snippet
gpt-oss-20b logo
GPT OSS 20B
Mini Rhythm Game Snippet
grok-4 logo
xAI: Grok 4Mini Rhythm Game Snippet
grok-4 logo
xAI: Grok 4
Mini Rhythm Game Snippet
grok-4-fast-free logo
xAI: Grok 4 Fast (free)Mini Rhythm Game Snippet
grok-4-fast-free logo
xAI: Grok 4 Fast (free)
Mini Rhythm Game Snippet
grok-4.1-fast logo
Grok 4.1 FastMini Rhythm Game Snippet
grok-4.1-fast logo
Grok 4.1 Fast
Mini Rhythm Game Snippet
grok-code-fast-1 logo
Grok Code Fast 1Mini Rhythm Game Snippet
grok-code-fast-1 logo
Grok Code Fast 1
Mini Rhythm Game Snippet
horizon-alpha logo
Horizon AlphaMini Rhythm Game Snippet
horizon-alpha logo
Horizon Alpha
Mini Rhythm Game Snippet
horizon-beta logo
Horizon BetaMini Rhythm Game Snippet
horizon-beta logo
Horizon Beta
Mini Rhythm Game Snippet
intellect-3 logo
INTELLECT-3Mini Rhythm Game Snippet
intellect-3 logo
INTELLECT-3
Mini Rhythm Game Snippet
kimi-k2-0905 logo
MoonshotAI: Kimi K2 0905Mini Rhythm Game Snippet
kimi-k2-0905 logo
MoonshotAI: Kimi K2 0905
Mini Rhythm Game Snippet
kimi-k2-thinking logo
Kimi K2 ThinkingMini Rhythm Game Snippet
kimi-k2-thinking logo
Kimi K2 Thinking

Couldn't render this response

This model didn't return a displayable web page for this challenge.

View raw output
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyber Beat - Rhythm Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #1e1e2e 0%, #2d1b69 100%);
            color: #fff;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #gameContainer {
            width: 900px;
            height: 600px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 20px;
            box-shadow: 0 0 50px rgba(0, 255, 255, 0.5);
            position: relative;
            overflow: hidden;
        }

        #gameArea {
            width: 100%;
            height: 450px;
            position: relative;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
        }

        .lane {
            width: 25%;
            height: 100%;
            position: absolute;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .lane:nth-child(1) { left: 0; }
        .lane:nth-child(2) { left: 25%; }
        .lane:nth-child(3) { left: 50%; }
        .lane:nth-child(4) { left: 75%; }

        .hitZone {
            position: absolute;
            bottom: 50px;
            width: 100%;
            height: 80px;
            background: linear-gradient(to top, rgba(0, 255, 255, 0.3) 0%, transparent 100%);
            border-top: 3px solid #00ffff;
            border-bottom: 3px solid #00ffff;
        }

        .note {
            position: absolute;
            width: 60%;
            height: 20px;
            left: 20%;
            background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
            transition: transform 0.1s;
        }

        .note.perfect {
            box-shadow: 0 0 30px rgba(0, 255, 0, 1);
            transform: scale(1.2);
        }

        .note.good {
            box-shadow: 0 0 30px rgba(255, 255, 0, 1);
            transform: scale(1.1);
        }

        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #score {
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
        }

        #combo {
            font-size: 20px;
            color: #ff00ff;
            text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
        }

        #startScreen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        #startScreen h1 {
            font-size: 48px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        #startButton {
            padding: 15px 40px;
            font-size: 24px;
            background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
            border: none;
            border-radius: 50px;
            color: #fff;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        #startButton:hover {
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(255, 0, 255, 0.8);
        }

        #controls {
            margin-top: 30px;
            text-align: center;
            opacity: 0.7;
        }

        .key {
            display: inline-block;
            padding: 10px 15px;
            margin: 0 5px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid #00ffff;
            border-radius: 5px;
            font-weight: bold;
        }

        .feedback {
            position: absolute;
            bottom: 150px;
            width: 100%;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .feedback.show {
            opacity: 1;
        }

        .feedback.perfect {
            color: #00ff00;
            text-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
        }

        .feedback.good {
            color: #ffff00;
            text-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
        }

        .feedback.miss {
            color: #ff0000;
            text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
        }

        #gameOver {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        #gameOver h2 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #ff00ff;
        }

        #finalScore {
            font-size: 32px;
            margin-bottom: 30px;
        }

        #restartButton {
            padding: 15px 40px;
            font-size: 24px;
            background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
            border: none;
            border-radius: 50px;
            color: #fff;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        #restartButton:hover {
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(255, 0, 255, 0.8);
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <div id="startScreen">
            <h1>CYBER BEAT</h1>
            <button id="startButton">START GAME</button>
            <div id="controls">
                <p>Use keys to hit the notes:</p>
                <div style="margin-top: 10px;">
                    <span class="key">D</span>
                    <span class="key">F</span>
                    <span class="key">J</span>
                    <span class="key">K</span>
                </div>
            </div>
        </div>

        <div id="gameOver">
            <h2>GAME OVER</h2>
            <div id="finalScore">Final Score: 0</div>
            <button id="restartButton">PLAY AGAIN</button>
        </div>

        <div id="ui">
            <div id="score">Score: 0</div>
            <div id="combo">Combo: 0</div>
        </div>

        <div id="gameArea">
            <div class="lane">
                <div class="hitZone"></div>
            </div>
            <div class="lane">
                <div class="hitZone"></div>
            </div>
            <div class="lane">
                <div class="hitZone"></div>
            </div>
            <div class="lane">
                <div class="hitZone"></div>
            </div>
        </div>

        <div class="feedback" id="feedback"></div>
    </div>

    <script>
        class RhythmGame {
            constructor() {
                this.score
Mini Rhythm Game Snippet
kimi-k2.5 logo
Kimi K2.5Mini Rhythm Game Snippet
kimi-k2.5 logo
Kimi K2.5
Mini Rhythm Game Snippet
kimi-linear-48b-a3b-instruct logo
Kimi Linear 48B A3B InstructMini Rhythm Game Snippet
kimi-linear-48b-a3b-instruct logo
Kimi Linear 48B A3B Instruct
Mini Rhythm Game Snippet
llama-3.1-70b logo
Llama 3.1 70B (Instruct)Mini Rhythm Game Snippet
llama-3.1-70b logo
Llama 3.1 70B (Instruct)
Mini Rhythm Game Snippet
Epic Fail·Broken Output
mimo-v2-flash logo
MiMo-V2-FlashMini Rhythm Game Snippet
mimo-v2-flash logo
MiMo-V2-Flash
Mini Rhythm Game Snippet
minimax-m2-free logo
MiniMax M2Mini Rhythm Game Snippet
minimax-m2-free logo
MiniMax M2
Mini Rhythm Game Snippet
minimax-m2-her logo
MiniMax M2-herMini Rhythm Game Snippet
minimax-m2-her logo
MiniMax M2-her
No content available for this output.
Mini Rhythm Game Snippet
minimax-m2.1 logo
MiniMax: MiniMax M2.1Mini Rhythm Game Snippet
minimax-m2.1 logo
MiniMax: MiniMax M2.1
Mini Rhythm Game Snippet
minimax-m2.5 logo
MiniMax M2.5Mini Rhythm Game Snippet
minimax-m2.5 logo
MiniMax M2.5
Mini Rhythm Game Snippet
mistral-large-2512 logo
Mistral Large 3 2512Mini Rhythm Game Snippet
mistral-large-2512 logo
Mistral Large 3 2512
Mini Rhythm Game Snippet
mistral-medium-3.1 logo
Mistral Medium 3.1Mini Rhythm Game Snippet
mistral-medium-3.1 logo
Mistral Medium 3.1

Couldn't render this response

This model didn't return a displayable web page for this challenge.

View raw output
# Neon Pulse Rhythm Game

Here's a complete browser-based rhythm game with a futuristic neon theme. Players must hit notes as they reach the target zone in sync with the music.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Pulse Rhythm Game</title>
    <style>
        :root {
            --neon-pink: #ff2ced;
            --neon-blue: #0af2ff;
            --neon-purple: #bf00ff;
            --neon-green: #00ff9d;
            --dark-bg: #0a0412;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: var(--dark-bg);
            color: white;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            user-select: none;
        }

        #game-container {
            width: 80%;
            max-width: 800px;
            height: 90vh;
            max-height: 600px;
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        #game-area {
            position: absolute;
            width: 100%;
            height: 80%;
            bottom: 20%;
            background: linear-gradient(to bottom,
                rgba(10, 4, 18, 0.8) 0%,
                rgba(10, 4, 18, 0.6) 50%,
                rgba(10, 4, 18, 0.8) 100%);
        }

        #judgment-line {
            position: absolute;
            bottom: 20%;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg,
                var(--neon-pink),
                var(--neon-blue),
                var(--neon-purple),
                var(--neon-green));
            box-shadow: 0 0 10px var(--neon-blue),
                        0 0 20px var(--neon-pink);
        }

        #note-highway {
            position: absolute;
            width: 80%;
            height: 100%;
            left: 10%;
            display: flex;
            justify-content: space-around;
        }

        .lane {
            width: 20%;
            height: 100%;
            position: relative;
        }

        .note {
            position: absolute;
            width: 60%;
            height: 20px;
            left: 20%;
            background: var(--neon-blue);
            border-radius: 5px;
            box-shadow: 0 0 10px var(--neon-blue);
            transition: transform 0.1s linear;
        }

        .note.hold {
            height: 100px;
            background: var(--neon-purple);
            box-shadow: 0 0 10px var(--neon-purple);
        }

        .note.hold .tail {
            position: absolute;
            width: 100%;
            height: 80%;
            bottom: 0;
            background: rgba(191, 0, 255, 0.3);
            border-radius: 5px;
        }

        .note.pink { background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink); }
        .note.green { background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }

        #key-indicators {
            position: absolute;
            bottom: 10%;
            width: 80%;
            left: 10%;
            display: flex;
            justify-content: space-around;
        }

        .key {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            border: 3px solid rgba(255, 255, 255, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.1s;
            user-select: none;
        }

        .key.active {
            transform: scale(0.9);
            box-shadow: 0 0 20px var(--neon-blue);
        }

        .key.pink { border-color: var(--neon-pink); }
        .key.green { border-color: var(--neon-green); }
        .key.pink.active { box-shadow: 0 0 20px var(--neon-pink); }
        .key.green.active { box-shadow: 0 0 20px var(--neon-green); }

        #score-display {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 20px;
            color: var(--neon-blue);
            text-shadow: 0 0 5px var(--neon-blue);
        }

        #accuracy-display {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            color: var(--neon-green);
            text-shadow: 0 0 5px var(--neon-green);
        }

        #judgment-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            font-weight: bold;
            color: white;
            text-shadow: 0 0 10px white;
            opacity: 0;
            transition: opacity 0.2s;
        }

        #combo-display {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            color: var(--neon-purple);
            text-shadow: 0 0 5px var(--neon-purple);
        }

        #start-screen, #game-over-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            color: white;
            text-align: center;
        }

        #game-over-screen {
            display: none;
        }

        .neon-button {
            padding: 12px 30px;
            margin: 10px;
            border: none;
            border-radius: 5px;
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 0 10px var(--neon-blue);
        }

        .neon-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px var(--neon-pink);
        }

        .instructions {
            margin: 20px;
            max-width: 70%;
            line-height: 1.5;
        }

        #song-title {
            font-size: 36px;
            margin-bottom: 20px;
            color: var(--neon-purple);
            text-shadow: 0 0 10px var(--neon-purple);
        }

        #final-score {
            font-size: 28px;
            margin: 20px;
            color: var(--neon-green);
            text-shadow: 0 0 5px var(--neon-green);
        }

        .difficulty {
            margin: 10px;
            padding: 5px 15px;
            border: 2px solid var(--neon-blue);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .difficulty:hover {
            background: rgba(0, 242, 255, 0.2);
        }

        .difficulty.selected {
            background: rgba(0, 242, 255, 0.4);
            border-color: var(--neon-pink);
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="game-area">
            <div id="note-highway">
                <div class="lane" data-key="a"></div>
                <div class="lane" data-key="s"></div>
                <div class="lane" data-key="d"></div>
                <div class="lane" data-key="f"></div>
            </div>
            <div id="judgment-line"></div>
        </div>

        <div id="key-indicators">
            <div class="key" data-key="a">A</div>
            <div class="key" data-key="s">S</div>
            <div class="key pink" data-key="d">D</div>
            <div class="key green" data-key="f">F</div>
        </div>

        <div id="score-display">Score: 0</div>
        <div id="accuracy-display">Accuracy: 100%</div>
        <div id="combo-display">Combo: 0</div>
        <div id="judgment-text"></div>
    </div>

    <div id="start-screen">
        <h1 id="song-title">NEON PULSE</h1>
        <div class="instructions">
            <p>Hit the notes as they reach the judgment line by pressing the corresponding keys:</p>
            <p><strong>A</strong> <strong>S</strong> <strong style="color: #ff2ced;">D</strong> <strong style="color: #00ff9d;">F</strong></p>
            <p>Hold notes for the duration of the long notes!</p>
        </div>

        <div style="margin: 20px;">
            <span class="difficulty selected" data-difficulty="easy">EASY</span>
            <span class="difficulty" data-difficulty="medium">MEDIUM</span>
            <span class="difficulty" data-difficulty="hard">HARD</span>
        </div>

        <button class="neon-button" id="start-button">START GAME</button>
    </div>

    <div id="game-over-screen">
        <h1 id="song-title">GAME OVER</h1>
        <div id="final-score">Final Score: 0</div>
        <button class="neon-button" id="restart-button">PLAY AGAIN</button>
    </div>

    <audio id="game-music" src="data:audio/mpeg;base64,SUQzBAAAAAAAQkFVQ0FERVJBAAD//wMAUEsDBBQAAAAIAJVlWVWl9P07gAAAIAAIABQAdHJ1ZS5tcDVQSwMEFAAAAAgAlZVllaX0/TuAAAAQAAAAIQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
Mini Rhythm Game Snippet
mistral-small-creative logo
Mistral Small CreativeMini Rhythm Game Snippet
mistral-small-creative logo
Mistral Small Creative
Mini Rhythm Game Snippet
nemotron-nano-9b-v2 logo
NVIDIA Nemotron Nano 9B V2Mini Rhythm Game Snippet
nemotron-nano-9b-v2 logo
NVIDIA Nemotron Nano 9B V2
Mini Rhythm Game Snippet
nova-2-lite-v1-free logo
Amazon Nova 2 LiteMini Rhythm Game Snippet
nova-2-lite-v1-free logo
Amazon Nova 2 Lite
Mini Rhythm Game Snippet
nova-premier-v1 logo
Nova Premier 1.0Mini Rhythm Game Snippet
nova-premier-v1 logo
Nova Premier 1.0
Mini Rhythm Game Snippet
o3 logo
OpenAI o3Mini Rhythm Game Snippet
o3 logo
OpenAI o3
Mini Rhythm Game Snippet
o4-mini-high logo
OpenAI o4 Mini HighMini Rhythm Game Snippet
o4-mini-high logo
OpenAI o4 Mini High
Mini Rhythm Game Snippet
polaris-alpha logo
Polaris AlphaMini Rhythm Game Snippet
polaris-alpha logo
Polaris Alpha
Mini Rhythm Game Snippet
pony-alpha logo
Pony AlphaMini Rhythm Game Snippet
pony-alpha logo
Pony Alpha
Mini Rhythm Game Snippet
qwen-plus-2025-07-28 logo
Qwen Plus 0728Mini Rhythm Game Snippet
qwen-plus-2025-07-28 logo
Qwen Plus 0728
Mini Rhythm Game Snippet
qwen-plus-2025-07-28-thinking logo
Qwen Plus 0728 (thinking)Mini Rhythm Game Snippet
qwen-plus-2025-07-28-thinking logo
Qwen Plus 0728 (thinking)
Mini Rhythm Game Snippet
qwen3-235b-a22b-07-25 logo
Qwen: Qwen3 235B A22B 2507Mini Rhythm Game Snippet
qwen3-235b-a22b-07-25 logo
Qwen: Qwen3 235B A22B 2507
Mini Rhythm Game Snippet
qwen3-235b-a22b-thinking-2507 logo
Qwen: Qwen3 235B A22B Thinking 2507Mini Rhythm Game Snippet
qwen3-235b-a22b-thinking-2507 logo
Qwen: Qwen3 235B A22B Thinking 2507
Mini Rhythm Game Snippet
qwen3-30b-a3b-instruct-2507 logo
Qwen: Qwen3 30B A3B Instruct 2507Mini Rhythm Game Snippet
qwen3-30b-a3b-instruct-2507 logo
Qwen: Qwen3 30B A3B Instruct 2507
Mini Rhythm Game Snippet
qwen3-30b-a3b-thinking-2507 logo
Qwen3 30B A3B Thinking 2507Mini Rhythm Game Snippet
qwen3-30b-a3b-thinking-2507 logo
Qwen3 30B A3B Thinking 2507
Mini Rhythm Game Snippet
qwen3-coder logo
Qwen3 CoderMini Rhythm Game Snippet
qwen3-coder logo
Qwen3 Coder
Mini Rhythm Game Snippet
qwen3-coder-flash logo
Qwen3 Coder FlashMini Rhythm Game Snippet
qwen3-coder-flash logo
Qwen3 Coder Flash
Mini Rhythm Game Snippet
qwen3-coder-next logo
Qwen3 Coder NextMini Rhythm Game Snippet
qwen3-coder-next logo
Qwen3 Coder Next
Mini Rhythm Game Snippet
qwen3-coder-plus logo
Qwen3 Coder PlusMini Rhythm Game Snippet
qwen3-coder-plus logo
Qwen3 Coder Plus
Mini Rhythm Game Snippet
qwen3-max logo
Qwen: Qwen3 MaxMini Rhythm Game Snippet
qwen3-max logo
Qwen: Qwen3 Max
Mini Rhythm Game Snippet
qwen3-next-80b-a3b-instruct logo
Qwen3 Next 80B A3B InstructMini Rhythm Game Snippet
qwen3-next-80b-a3b-instruct logo
Qwen3 Next 80B A3B Instruct
Mini Rhythm Game Snippet
qwen3-next-80b-a3b-thinking logo
Qwen3 Next 80B A3B ThinkingMini Rhythm Game Snippet
qwen3-next-80b-a3b-thinking logo
Qwen3 Next 80B A3B Thinking
Mini Rhythm Game Snippet
qwen3.5-plus-02-15 logo
Qwen: Qwen3.5 Plus 2026-02-15Mini Rhythm Game Snippet
qwen3.5-plus-02-15 logo
Qwen: Qwen3.5 Plus 2026-02-15
Mini Rhythm Game Snippet
qwen3.5-397b-a17b logo
Qwen: Qwen3.5 397B A17BMini Rhythm Game Snippet
qwen3.5-397b-a17b logo
Qwen: Qwen3.5 397B A17B
Mini Rhythm Game Snippet
sherlock-dash-alpha logo
Sherlock Dash AlphaMini Rhythm Game Snippet
sherlock-dash-alpha logo
Sherlock Dash Alpha
Mini Rhythm Game Snippet
sherlock-think-alpha logo
Sherlock Think AlphaMini Rhythm Game Snippet
sherlock-think-alpha logo
Sherlock Think Alpha
Mini Rhythm Game Snippet
solar-pro-3-free logo
Solar Pro 3Mini Rhythm Game Snippet
solar-pro-3-free logo
Solar Pro 3
Mini Rhythm Game Snippet
sonar-pro-search logo
Sonar Pro SearchMini Rhythm Game Snippet
sonar-pro-search logo
Sonar Pro Search
Mini Rhythm Game Snippet
sonoma-dusk-alpha logo
Sonoma Dusk AlphaMini Rhythm Game Snippet
sonoma-dusk-alpha logo
Sonoma Dusk Alpha
Mini Rhythm Game Snippet
sonoma-sky-alpha logo
Sonoma Sky AlphaMini Rhythm Game Snippet
sonoma-sky-alpha logo
Sonoma Sky Alpha
Mini Rhythm Game Snippet
tng-r1t-chimera-free logo
TNG R1T ChimeraMini Rhythm Game Snippet
tng-r1t-chimera-free logo
TNG R1T Chimera
Mini Rhythm Game Snippet
trinity-large-preview-free logo
Trinity Large PreviewMini Rhythm Game Snippet
trinity-large-preview-free logo
Trinity Large Preview
Mini Rhythm Game Snippet