Create a complete, polished Tetris-style game in a single self-contained HTML file.

Requirements:
- Use only HTML, CSS, and vanilla JavaScript.
- Everything must be inside one `.html` file.
- Do not use external libraries, frameworks, images, fonts, or CDN links.
- The game should run by opening the HTML file in a browser.

Game features:
- Classic falling tetromino gameplay.
- 10x20 grid.
- Seven standard tetrominoes: I, O, T, S, Z, J, L.
- Random piece generation using a 7-bag system.
- Piece movement:
- Left/right arrow keys: move horizontally.
- Down arrow: soft drop.
- Up arrow or X: rotate clockwise.
- Z: rotate counterclockwise.
- Space: hard drop.
- C: hold piece.
- P: pause/resume.
- R: restart.
- Show the next 3 pieces.
- Show held piece.
- Score, level, lines cleared, and game-over state.
- Increasing fall speed as level increases.
- Line clearing animation.
- Ghost piece preview showing where the current piece will land.
- Collision detection, wall kicks, lock delay, and hard drop behavior.
- Prevent page scrolling when using arrow keys or space.

UI/UX:
- Clean modern arcade-style design.
- Centered game layout.
- Responsive enough to fit desktop and mobile screens.
- Include on-screen controls for mobile/touch users.
- Use CSS animations or transitions where appropriate.
- Display controls/help text clearly.
- Add a start screen and game-over screen.
- Make the game visually appealing with distinct colors for each tetromino.

Code quality:
- Write clean, readable, well-commented code.
- Organize JavaScript into clear functions or classes.
- Avoid unnecessary complexity.
- Make sure there are no syntax errors.
- The final answer should contain only the full HTML code, starting with `<!DOCTYPE html>` and ending with `</html>`.

Before finalizing, mentally test:
- Pieces spawn correctly.
- Pieces rotate near walls.
- Lines clear correctly.
- Game over triggers when the spawn area is blocked.
- Hold works only once per piece drop.
- Pause stops movement and timers.