Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
The “Marvel Crisis Protocol Dice Roller” is a modern, responsive single-page web application designed to simulate the official Marvel Crisis Protocol 8-sided dice used in gameplay. This application serves as a premium tabletop companion tool, providing players with an immersive experience through realistic 3D dice physics and a clean, tactical interface.

## CORE FEATURES
1. **Realistic Dice Rolling**: The application simulates 3D rolling dice with randomized physics, ensuring that each roll feels tactile and dynamic.
2. **Animated Results Display**: Players can view animated dice results, including face outcomes, success totals, and critical explode handling.
3. **Roll History and Statistics**: Maintains a history of recent rolls and tracks session statistics, including total dice rolled and average successes per roll.
4. **Custom Dice Count Controls**: Users can select from predefined dice counts or input a custom quantity for their rolls.
5. **MCP Critical Explode Rule**: Toggles the critical explode rule, allowing for bonus dice generation while adhering to specific logic constraints.
6. **Mobile-Friendly Design**: Ensures usability on mobile devices with thumb-friendly controls and responsive layout adjustments.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: A card-based responsive layout with large readable buttons and dice visuals, featuring smooth transitions and glassmorphism or metallic panel styling.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API for managing application state.

## IMPLEMENTATION STEPS
1. **Project Setup**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Install Dependencies**: Include Three.js for 3D graphics and Cannon.js for physics simulations.
3. **Create Core Components**:
   - Dice rolling interface with 3D visualization.
   - Controls for selecting the number of dice to roll.
   - Display for animated results and session statistics.
4. **Implement Rolling Logic**: Write functions to handle the dice rolling mechanics, including critical explosion logic and result calculations.
5. **Design Layout**: Use Tailwind CSS to create a responsive layout that adapts to different screen sizes, ensuring usability on mobile devices.
6. **Add Sound Effects**: Integrate audio files for dice rolling and landing sounds, along with a mute/unmute toggle feature.
7. **Test and Optimize**: Conduct thorough testing for both desktop and mobile experiences, ensuring smooth performance and user-friendly interactions.

## USER EXPERIENCE
Users will interact with the application by selecting the number of dice they wish to roll using easily accessible buttons or a custom input field. Upon clicking the prominent “ROLL DICE” button, the dice will roll with realistic animations, and the results will be displayed prominently on the screen. Players can view their roll history and session statistics, with options to toggle critical explode rules and reset statistics as needed. The layout remains clean and readable, ensuring that players can easily track their rolls during gameplay.
```