[ISSUE-8] Redesign life counter page with responsive layout and card backgrounds

Changements détaillés:
- Suppression du formulaire de configuration initiale, démarrage direct avec 2 joueurs
- Implémentation d'une grille responsive (2-8 joueurs, 1-4 colonnes selon l'écran)
- Ajout de la configuration dynamique du nombre de joueurs avec mise à jour instantanée
- Création de fonds personnalisables utilisant les illustrations de cartes Scryfall
- Intégration d'une modale de recherche de cartes par nom

Détails techniques:
- Nouveaux composants: PlayerLifeCounter (87 lignes), CardSearchModal (118 lignes)
- Réécriture complète de LifeCounter (209 lignes)
- Design mobile-first avec breakpoints Tailwind (sm, md, lg)
- TypeScript avec typage complet
- Intégration avec le service Scryfall API existant
- Fonctionnalités: édition des noms, vie de départ (20/30/40), reset global

Tests: Build réussi, pas d'erreurs de linting

Resolves: #8

PROJECT_STRUCTURE.md

@@ -1,157 +0,0 @@
-# Deckerr
-
-A modern Magic: The Gathering deck builder and collection manager built with React, TypeScript, and Supabase.
-
-## Overview
-
-Deckerr is a web application that allows Magic: The Gathering players to build and manage their decks, track their card collections, search for cards, and use a life counter during games. The application provides a clean, animated interface with user authentication and persistent storage.
-
-## Features
-
-- **Deck Management**: Create, edit, and organize your Magic: The Gathering decks
-- **Collection Tracking**: Keep track of your card collection with quantity management
-- **Card Search**: Search and browse Magic cards to add to your decks or collection
-- **Life Counter**: Track player life totals during games
-- **User Profiles**: Personalized user profiles with theme customization
-- **Authentication**: Secure user authentication powered by Supabase
-- **Format Support**: Support for different Magic formats (Commander, Standard, etc.)
-
-## Technology Stack
-
-- **Frontend**: React 18 with TypeScript
-- **Build Tool**: Vite
-- **Styling**: Tailwind CSS with custom animations
-- **Backend/Database**: Supabase (PostgreSQL)
-- **Authentication**: Supabase Auth
-- **Icons**: Lucide React
-- **Linting**: ESLint with TypeScript support
-
-## Project Structure
-
-```
-deckerr/
-├── src/
-│   ├── components/          # React components
-│   │   ├── CardCarousel.tsx    # Card carousel display
-│   │   ├── CardSearch.tsx      # Card search interface
-│   │   ├── Collection.tsx      # Collection management
-│   │   ├── DeckBuilder.tsx     # Deck building interface
-│   │   ├── DeckCard.tsx        # Deck card component
-│   │   ├── DeckEditor.tsx      # Deck editing interface
-│   │   ├── DeckList.tsx        # List of user decks
-│   │   ├── DeckManager.tsx     # Deck management
-│   │   ├── LifeCounter.tsx     # Game life counter
-│   │   ├── LoginForm.tsx       # User authentication form
-│   │   ├── MagicCard.tsx       # Magic card display component
-│   │   ├── ManaIcons.tsx       # Mana symbol icons
-│   │   ├── Navigation.tsx      # App navigation
-│   │   └── Profile.tsx         # User profile page
-│   │
-│   ├── contexts/            # React contexts
-│   │   └── AuthContext.tsx     # Authentication context
-│   │
-│   ├── lib/                 # Library code
-│   │   ├── Entities.ts         # Supabase database types
-│   │   └── supabase.ts         # Supabase client configuration
-│   │
-│   ├── services/            # API and service layers
-│   │   └── api.ts              # API service functions
-│   │
-│   ├── types/               # TypeScript type definitions
-│   │   └── index.ts            # Shared types
-│   │
-│   ├── utils/               # Utility functions
-│   │   ├── deckValidation.ts   # Deck validation logic
-│   │   └── theme.ts            # Theme utilities
-│   │
-│   ├── App.tsx              # Main application component
-│   ├── main.tsx             # Application entry point
-│   ├── main.js              # JavaScript entry
-│   ├── index.css            # Global styles
-│   └── vite-env.d.ts        # Vite type definitions
-│
-├── public/                  # Static assets (if any)
-│
-├── index.html               # HTML entry point
-├── package.json             # Project dependencies
-├── vite.config.ts           # Vite configuration
-├── tsconfig.json            # TypeScript configuration
-├── tsconfig.app.json        # App-specific TS config
-├── tsconfig.node.json       # Node-specific TS config
-├── tailwind.config.js       # Tailwind CSS configuration
-├── postcss.config.js        # PostCSS configuration
-├── eslint.config.js         # ESLint configuration
-├── LICENSE                  # Project license
-└── README.md                # This file
-```
-
-## Database Schema
-
-The application uses Supabase with the following main tables:
-
-- **profiles**: User profiles with username and theme preferences
-- **decks**: User decks with name, format, and timestamps
-- **deck_cards**: Cards in decks with quantity and commander status
-- **collections**: User card collections with quantities
-
-## Getting Started
-
-### Prerequisites
-
-- Node.js (v18 or higher)
-- npm or pnpm
-- Supabase account and project
-
-### Installation
-
-1. Clone the repository:
-   ```bash
-   git clone <repository-url>
-   cd deckerr
-   ```
-
-2. Install dependencies:
-   ```bash
-   npm install
-   # or
-   pnpm install
-   ```
-
-3. Set up environment variables:
-   Create a `.env` file with your Supabase credentials:
-   ```
-   VITE_SUPABASE_URL=your_supabase_url
-   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
-   ```
-
-4. Run the development server:
-   ```bash
-   npm run dev
-   ```
-
-5. Open your browser to `http://localhost:5173`
-
-## Available Scripts
-
-- `npm run dev` - Start development server
-- `npm run build` - Build for production
-- `npm run preview` - Preview production build
-- `npm run lint` - Run ESLint
-
-## Features in Detail
-
-### Deck Builder
-Build and customize your Magic decks with support for different formats. The deck editor validates your deck composition according to format rules.
-
-### Collection Manager
-Track which cards you own and their quantities, making it easy to see what cards you have available when building decks.
-
-### Card Search
-Search through Magic cards using various filters and criteria to find exactly what you need for your deck.
-
-### Life Counter
-A built-in life counter for tracking player life totals during games, with an animated interface.
-
-## License
-
-See the LICENSE file for details.

src/components/CardSearchModal.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { X, Search } from 'lucide-react';
+import { searchCards } from '../services/api';
+import { Card } from '../types';
+
+interface CardSearchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelectCard: (card: Card) => void;
+}
+
+export default function CardSearchModal({ isOpen, onClose, onSelectCard }: CardSearchModalProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<Card[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSearch = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!searchQuery.trim()) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const cards = await searchCards(`name:${searchQuery}`);
+      setSearchResults(cards || []);
+    } catch (err) {
+      setError('Failed to fetch cards. Please try again.');
+      console.error('Error fetching cards:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectCard = (card: Card) => {
+    onSelectCard(card);
+    onClose();
+    setSearchQuery('');
+    setSearchResults([]);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-gray-800 rounded-lg max-w-4xl w-full max-h-[90vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-700">
+          <h2 className="text-xl font-bold text-white">Search Card for Background</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            <X size={24} />
+          </button>
+        </div>
+
+        {/* Search Form */}
+        <div className="p-4 border-b border-gray-700">
+          <form onSubmit={handleSearch} className="flex gap-2">
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="flex-1 px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
+              placeholder="Search for a card by name..."
+              autoFocus
+            />
+            <button
+              type="submit"
+              className="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white flex items-center gap-2 transition-colors"
+            >
+              <Search size={20} />
+              Search
+            </button>
+          </form>
+        </div>
+
+        {/* Results */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading && (
+            <div className="flex items-center justify-center h-32">
+              <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
+            </div>
+          )}
+
+          {error && (
+            <div className="bg-red-500/10 border border-red-500 rounded-lg p-4 text-red-400">
+              {error}
+            </div>
+          )}
+
+          {!loading && !error && searchResults.length === 0 && searchQuery && (
+            <div className="text-center text-gray-400 py-8">
+              No cards found. Try a different search term.
+            </div>
+          )}
+
+          {!loading && !error && searchResults.length === 0 && !searchQuery && (
+            <div className="text-center text-gray-400 py-8">
+              Search for a card to use as background
+            </div>
+          )}
+
+          {searchResults.length > 0 && (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+              {searchResults.map((card) => (
+                <button
+                  key={card.id}
+                  onClick={() => handleSelectCard(card)}
+                  className="bg-gray-700 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all transform hover:scale-105"
+                >
+                  {card.image_uris?.art_crop ? (
+                    <img
+                      src={card.image_uris.art_crop}
+                      alt={card.name}
+                      className="w-full h-32 object-cover"
+                    />
+                  ) : (
+                    <div className="w-full h-32 bg-gray-600 flex items-center justify-center">
+                      <span className="text-gray-400 text-xs text-center px-2">No Image</span>
+                    </div>
+                  )}
+                  <div className="p-2">
+                    <p className="text-white text-sm font-medium truncate">{card.name}</p>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/LifeCounter.tsx

@@ -1,167 +1,208 @@
-import React, { useState, useEffect } from 'react';
-    import { Plus, Minus } from 'lucide-react';
+import React, { useState } from 'react';
+import { Users, RotateCcw, Settings } from 'lucide-react';
+import PlayerLifeCounter from './PlayerLifeCounter';
+import CardSearchModal from './CardSearchModal';
+import { Card } from '../types';
 
-    interface Player {
-      id: number;
-      name: string;
-      life: number;
-      color: string;
+interface Player {
+  id: number;
+  name: string;
+  life: number;
+  backgroundImage?: string;
+}
+
+const DEFAULT_STARTING_LIFE = 20;
+
+export default function LifeCounter() {
+  const [players, setPlayers] = useState<Player[]>([
+    { id: 1, name: 'Player 1', life: DEFAULT_STARTING_LIFE },
+    { id: 2, name: 'Player 2', life: DEFAULT_STARTING_LIFE },
+  ]);
+  const [isCardSearchOpen, setIsCardSearchOpen] = useState(false);
+  const [selectedPlayerId, setSelectedPlayerId] = useState<number | null>(null);
+  const [showSettings, setShowSettings] = useState(false);
+  const [startingLife, setStartingLife] = useState(DEFAULT_STARTING_LIFE);
+
+  const updateLife = (playerId: number, change: number) => {
+    setPlayers((prevPlayers) =>
+      prevPlayers.map((player) =>
+        player.id === playerId ? { ...player, life: Math.max(0, player.life + change) } : player
+      )
+    );
+  };
+
+  const changePlayerName = (playerId: number) => {
+    const player = players.find((p) => p.id === playerId);
+    if (!player) return;
+
+    const newName = prompt('Enter new player name:', player.name);
+    if (newName && newName.trim()) {
+      setPlayers((prevPlayers) =>
+        prevPlayers.map((p) => (p.id === playerId ? { ...p, name: newName.trim() } : p))
+      );
     }
+  };
 
-    const COLORS = ['white', 'blue', 'black', 'red', 'green'];
+  const openBackgroundSelector = (playerId: number) => {
+    setSelectedPlayerId(playerId);
+    setIsCardSearchOpen(true);
+  };
 
-    export default function LifeCounter() {
-      const [numPlayers, setNumPlayers] = useState<number | null>(null);
-      const [playerNames, setPlayerNames] = useState<string[]>([]);
-      const [players, setPlayers] = useState<Player[]>([]);
-      const [setupComplete, setSetupComplete] = useState(false);
+  const handleCardSelect = (card: Card) => {
+    if (selectedPlayerId !== null && card.image_uris?.art_crop) {
+      setPlayers((prevPlayers) =>
+        prevPlayers.map((p) =>
+          p.id === selectedPlayerId ? { ...p, backgroundImage: card.image_uris!.art_crop } : p
+        )
+      );
+    }
+    setSelectedPlayerId(null);
+  };
 
-      useEffect(() => {
-        if (numPlayers !== null) {
-          setPlayers(
-            Array.from({ length: numPlayers }, (_, i) => ({
-              id: i + 1,
-              name: playerNames[i] || `Player ${i + 1}`,
-              life: 20,
-              color: COLORS[i % COLORS.length],
-            }))
-          );
-        }
-      }, [numPlayers, playerNames]);
+  const changePlayerCount = (count: number) => {
+    const currentCount = players.length;
 
-      const handleNumPlayersChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const newNumPlayers = parseInt(e.target.value, 10);
-        setNumPlayers(newNumPlayers);
-        setPlayerNames(Array(newNumPlayers).fill(''));
-      };
+    if (count > currentCount) {
+      // Add players
+      const newPlayers = Array.from({ length: count - currentCount }, (_, i) => ({
+        id: currentCount + i + 1,
+        name: `Player ${currentCount + i + 1}`,
+        life: startingLife,
+      }));
+      setPlayers([...players, ...newPlayers]);
+    } else if (count < currentCount) {
+      // Remove players
+      setPlayers(players.slice(0, count));
+    }
+  };
 
-      const handleNameChange = (index: number, newName: string) => {
-        const updatedNames = [...playerNames];
-        updatedNames[index] = newName;
-        setPlayerNames(updatedNames);
-      };
+  const resetAllLife = () => {
+    if (confirm(`Reset all players to ${startingLife} life?`)) {
+      setPlayers((prevPlayers) =>
+        prevPlayers.map((p) => ({ ...p, life: startingLife }))
+      );
+    }
+  };
 
-      const updateLife = (playerId: number, change: number) => {
-        setPlayers((prevPlayers) =>
-          prevPlayers.map((player) =>
-            player.id === playerId ? { ...player, life: player.life + change } : player
-          )
-        );
-      };
+  const getGridClass = () => {
+    const count = players.length;
+    if (count === 1) return 'grid-cols-1';
+    if (count === 2) return 'grid-cols-1 md:grid-cols-2';
+    if (count === 3) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
+    if (count === 4) return 'grid-cols-2 lg:grid-cols-2';
+    if (count === 5) return 'grid-cols-2 lg:grid-cols-3';
+    if (count === 6) return 'grid-cols-2 lg:grid-cols-3';
+    if (count === 7 || count === 8) return 'grid-cols-2 lg:grid-cols-4';
+    return 'grid-cols-2 lg:grid-cols-4';
+  };
 
-      const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        setSetupComplete(true);
-      };
+  return (
+    <div className="min-h-screen bg-gray-900 text-white flex flex-col">
+      {/* Header */}
+      <div className="bg-gray-800 border-b border-gray-700 px-4 py-3 flex items-center justify-between">
+        <h1 className="text-xl md:text-2xl font-bold">Life Counter</h1>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={resetAllLife}
+            className="bg-gray-700 hover:bg-gray-600 text-white rounded-lg px-3 py-2 text-sm flex items-center gap-2 transition-colors"
+          >
+            <RotateCcw size={18} />
+            <span className="hidden sm:inline">Reset</span>
+          </button>
+          <button
+            onClick={() => setShowSettings(!showSettings)}
+            className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-3 py-2 text-sm flex items-center gap-2 transition-colors"
+          >
+            <Settings size={18} />
+            <span className="hidden sm:inline">Settings</span>
+          </button>
+        </div>
+      </div>
 
-      const renderSetupForm = () => (
-        <div className="max-w-md mx-auto">
-          <h2 className="text-2xl font-bold mb-6">Setup Players</h2>
-          <form onSubmit={handleSubmit} className="space-y-4">
+      {/* Settings Panel */}
+      {showSettings && (
+        <div className="bg-gray-800 border-b border-gray-700 px-4 py-4 animate-fade-in">
+          <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Player Count */}
             <div>
               <label className="block text-sm font-medium text-gray-300 mb-2">
+                <Users size={16} className="inline mr-2" />
                 Number of Players
               </label>
-              <select
-                value={numPlayers || ''}
-                onChange={handleNumPlayersChange}
-                className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
-                required
-              >
-                <option value="" disabled>Select Number of Players</option>
-                {[2, 3, 4, 5, 6].map((num) => (
-                  <option key={num} value={num}>
-                    {num}
-                  </option>
+              <div className="grid grid-cols-4 gap-2">
+                {[2, 3, 4, 5, 6, 7, 8].map((count) => (
+                  <button
+                    key={count}
+                    onClick={() => changePlayerCount(count)}
+                    className={`py-2 rounded-lg font-medium transition-colors ${
+                      players.length === count
+                        ? 'bg-blue-600 text-white'
+                        : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                    }`}
+                  >
+                    {count}
+                  </button>
                 ))}
-              </select>
+              </div>
             </div>
 
-            {numPlayers !== null &&
-              Array.from({ length: numPlayers }, (_, i) => (
-                <div key={i}>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Player {i + 1} Name
-                  </label>
-                  <input
-                    type="text"
-                    value={playerNames[i] || ''}
-                    onChange={(e) => handleNameChange(i, e.target.value)}
-                    className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
-                    placeholder={`Player ${i + 1} Name`}
-                  />
-                </div>
-              ))}
-
-            {numPlayers !== null && (
-              <button
-                type="submit"
-                className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg"
-              >
-                Start Game
-              </button>
-            )}
-          </form>
-        </div>
-      );
-
-      const renderLifeCounters = () => (
-        <div className="flex flex-col items-center justify-center min-h-screen">
-          <div className="relative w-full h-full">
-            {players.map((player, index) => {
-              const angle = (index / players.length) * 360;
-              const rotation = 360 - angle;
-              const x = 50 + 40 * Math.cos((angle - 90) * Math.PI / 180);
-              const y = 50 + 40 * Math.sin((angle - 90) * Math.PI / 180);
-
-              return (
-                <div
-                  key={player.id}
-                  className="absolute transform -translate-x-1/2 -translate-y-1/2"
-                  style={{
-                    top: `${y}%`,
-                    left: `${x}%`,
-                    transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
-                  }}
-                >
-                  <div
-                    className="rounded-lg p-4 flex flex-col items-center"
-                    style={{
-                      backgroundColor: `var(--color-${player.color}-primary)`,
-                      color: 'white',
-                      transform: `rotate(${-rotation}deg)`,
+            {/* Starting Life */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Starting Life Total
+              </label>
+              <div className="grid grid-cols-4 gap-2">
+                {[20, 30, 40].map((life) => (
+                  <button
+                    key={life}
+                    onClick={() => {
+                      setStartingLife(life);
+                      if (confirm(`Change starting life to ${life}? This will reset all players.`)) {
+                        setPlayers((prevPlayers) =>
+                          prevPlayers.map((p) => ({ ...p, life }))
+                        );
+                      }
                     }}
+                    className={`py-2 rounded-lg font-medium transition-colors ${
+                      startingLife === life
+                        ? 'bg-green-600 text-white'
+                        : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                    }`}
                   >
-                    <h2 className="text-xl font-bold mb-4">{player.name}</h2>
-                    <div className="text-4xl font-bold mb-4">{player.life}</div>
-                    <div className="flex gap-4">
-                      <button
-                        onClick={() => updateLife(player.id, 1)}
-                        className="bg-green-600 hover:bg-green-700 rounded-full p-2"
-                      >
-                        <Plus size={24} />
-                      </button>
-                      <button
-                        onClick={() => updateLife(player.id, -1)}
-                        className="bg-red-600 hover:bg-red-700 rounded-full p-2"
-                      >
-                        <Minus size={24} />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
+                    {life}
+                  </button>
+                ))}
+              </div>
+            </div>
           </div>
         </div>
-      );
+      )}
 
-      return (
-        <div className="min-h-screen bg-gray-900 text-white p-6">
-          <div className="max-w-7xl mx-auto">
-            <h1 className="text-3xl font-bold mb-6">Life Counter</h1>
-            {!setupComplete ? renderSetupForm() : renderLifeCounters()}
-          </div>
-        </div>
-      );
-    }
+      {/* Life Counter Grid */}
+      <div className={`flex-1 grid ${getGridClass()} gap-2 md:gap-4 p-2 md:p-4`}>
+        {players.map((player) => (
+          <PlayerLifeCounter
+            key={player.id}
+            id={player.id}
+            name={player.name}
+            life={player.life}
+            backgroundImage={player.backgroundImage}
+            onLifeChange={(change) => updateLife(player.id, change)}
+            onChangeName={() => changePlayerName(player.id)}
+            onChangeBackground={() => openBackgroundSelector(player.id)}
+          />
+        ))}
+      </div>
+
+      {/* Card Search Modal */}
+      <CardSearchModal
+        isOpen={isCardSearchOpen}
+        onClose={() => {
+          setIsCardSearchOpen(false);
+          setSelectedPlayerId(null);
+        }}
+        onSelectCard={handleCardSelect}
+      />
+    </div>
+  );
+}

src/components/PlayerLifeCounter.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Plus, Minus, Image as ImageIcon } from 'lucide-react';
+
+interface PlayerLifeCounterProps {
+  id: number;
+  name: string;
+  life: number;
+  backgroundImage?: string;
+  onLifeChange: (change: number) => void;
+  onChangeName: () => void;
+  onChangeBackground: () => void;
+}
+
+export default function PlayerLifeCounter({
+  name,
+  life,
+  backgroundImage,
+  onLifeChange,
+  onChangeName,
+  onChangeBackground,
+}: PlayerLifeCounterProps) {
+  return (
+    <div className="relative h-full rounded-lg overflow-hidden shadow-lg">
+      {/* Background Image */}
+      {backgroundImage ? (
+        <div
+          className="absolute inset-0 bg-cover bg-center"
+          style={{ backgroundImage: `url(${backgroundImage})` }}
+        >
+          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/50 to-black/70"></div>
+        </div>
+      ) : (
+        <div className="absolute inset-0 bg-gradient-to-br from-gray-700 via-gray-800 to-gray-900"></div>
+      )}
+
+      {/* Content */}
+      <div className="relative h-full flex flex-col items-center justify-between p-4 md:p-6">
+        {/* Player Name */}
+        <button
+          onClick={onChangeName}
+          className="text-white font-bold text-lg md:text-xl hover:text-blue-300 transition-colors px-4 py-2 rounded-lg hover:bg-white/10"
+        >
+          {name}
+        </button>
+
+        {/* Life Total */}
+        <div className="flex flex-col items-center justify-center flex-1">
+          <div className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-bold text-white drop-shadow-2xl">
+            {life}
+          </div>
+        </div>
+
+        {/* Controls */}
+        <div className="flex flex-col gap-3 w-full">
+          {/* Life Buttons */}
+          <div className="flex gap-3 w-full">
+            <button
+              onClick={() => onLifeChange(-1)}
+              className="flex-1 bg-red-600 hover:bg-red-700 text-white rounded-lg py-3 md:py-4 px-4 font-bold text-xl transition-colors active:scale-95 flex items-center justify-center gap-2"
+            >
+              <Minus size={24} />
+              <span className="hidden sm:inline">-1</span>
+            </button>
+            <button
+              onClick={() => onLifeChange(1)}
+              className="flex-1 bg-green-600 hover:bg-green-700 text-white rounded-lg py-3 md:py-4 px-4 font-bold text-xl transition-colors active:scale-95 flex items-center justify-center gap-2"
+            >
+              <Plus size={24} />
+              <span className="hidden sm:inline">+1</span>
+            </button>
+          </div>
+
+          {/* Background Button */}
+          <button
+            onClick={onChangeBackground}
+            className="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-lg py-2 px-4 text-sm transition-colors flex items-center justify-center gap-2"
+          >
+            <ImageIcon size={16} />
+            Change Background
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}