# Casino Gaming Platform - Frontend

This is the frontend application for the Casino Gaming Platform. It's built with Angular 18 and TailwindCSS, providing a responsive and modern UI for the casino gaming experience.

## Development

### Commands

- **Build**: `bun run build` or `bunx @angular/cli build`
- **Start Dev Server**: `bun run start` or `bunx @angular/cli serve --proxy-config src/proxy.conf.json`
- **Format Code**: `bun run format` or `prettier --write "src/**/*.{ts,html,css,scss}"`
- **Lint**: `bun run lint` or `ng lint`
- **Test**: `bun run test` or `bunx @angular/cli test`
- **Test Single File**: `bunx @angular/cli test --include=path/to/test.spec.ts`

## Style Guide

### Color Palette

#### Primary Colors
- Deep Blue: `#0a1219` (background)
- Deep Blue Light: `#121e27` (secondary background)
- Deep Blue Contrast: `#1a2835` (cards, elements)

#### Accent Colors
- Emerald: `#10b981` (primary buttons)
- Emerald Dark: `#059669` (button hover)
- Emerald Light: `#34d399` (highlights)

#### Text Colors
- Primary Text: `#ffffff` (white)
- Secondary Text: `#94a3b8` (light gray)
- Tertiary Text: `#64748b` (darker gray)

#### Additional Accents
- Yellow: `#fbbf24`
- Red: `#ef4444`
- Purple: `#8b5cf6`

### Typography

#### Font Sizes
- Extra Small: Text-xs (footer disclaimers)
- Small: Text-sm (navigation links, footer links)
- Base: Text-base (general text)
- Large: Text-lg (section headings)
- Extra Large: Text-xl (stat numbers, game headings)
- Display: Text-4xl/5xl/7xl (welcome bonus text)

#### Font Weights
- Normal: General text
- Medium: Labels
- Semibold: Navigation brand
- Bold: Headings, stats
- Extrabold: Welcome bonus text

### Components

#### Buttons
- Primary: Emerald background with hover state
- Secondary: Deep blue light background with hover state
- All buttons have active scale effect (95%)
- Transition duration: 200-300ms

#### Cards
- Background: Deep blue contrast
- Rounded corners (lg)
- Shadow effects with hover transition
- Consistent padding (p-4)

#### Navigation
- Desktop: Horizontal links with hover effects
- Mobile: Collapsible menu with toggle
- Links have color and background transitions

#### Modals
- Backdrop blur with dark overlay
- Card-style container with emerald focus rings
- Consistent form styling with transitions

### Forms

#### Inputs
- Dark background with border
- Focus states with emerald accent
- Consistent padding and rounded corners
- Clear label positioning

### Layout

#### Grid System
- Mobile-first responsive grid
- Breakpoints: sm, md, lg
- Grid columns: 1 (mobile), 2 (tablet), 3 (desktop)
- Consistent gap spacing (gap-4)

#### Spacing
- Consistent margin/padding scale
- Mobile-responsive spacing adjustments

### Animation
- Transitions: 200-500ms duration
- Hover/active state animations
- Scale transformations (95-110%)
- Opacity transitions for navigation elements

### Components & Classes

#### Common UI Elements
- `.card` - Base card container
- `.button-primary` - Main CTA buttons
- `.button-secondary` - Alternative action buttons
- `.section-heading` - Section titles
- `.nav-link` - Navigation links
- `.modal-card` - Modal container

#### Game Elements
- `.game-card-content` - Game information container
- `.game-heading-sm` - Small game titles
- `.game-heading-xl` - Large game titles
- `.game-text` - Game descriptions
- `.slider-container` - Game carousel container

### Responsive Design
- Mobile-first approach
- Tailwind breakpoints (sm, md, lg)
- Different layouts based on screen size
- Responsive text sizing and spacing
- Hidden/visible elements using responsive classes

### CSS Framework
- Tailwind CSS for utility classes
- Custom utility classes with @apply directive
- CSS variables for theming
- Component-based styling approach