/* ===== RESPONSIVE - MEDIA QUERIES ===== */

/* ===== MOBILE (max-width: 768px) ===== */

@media (max-width: 768px) {
    /* Base */
    body {
        padding: 0;
        margin: 0;
    }
    
    /* Menu principal mobile */
    .welcome-section h2 {
        font-size: 2rem;
    }
    
    .quick-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }
    
    .stat-card {
        padding: var(--spacing-lg);
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .menu-actions {
        gap: var(--spacing-md);
    }
    
    .btn-primary {
        padding: 1.2rem var(--spacing-xl);
        font-size: 1rem;
        width: 100%;
        max-width: 300px;
    }
    
    .btn-secondary {
        padding: 0.9rem var(--spacing-lg);
        font-size: 0.9rem;
        width: 100%;
        max-width: 300px;
    }
    
    /* Vue jeu mobile */
    .container {
        padding: 0.8rem;
        min-height: calc(100vh - 80px);
        height: calc(100vh - 80px);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        max-width: none;
        width: 100%;
        border-radius: 0;
        overflow: hidden;
        position: relative;
    }
    
    /* Vue jeu spécifique : layout en 3 zones empilées */
    #gameView .container {
        display: grid;
        grid-template-rows: auto 1fr auto auto;
        grid-template-areas: 
            "header"
            "game"
            "keyboard"
            "controls";
        gap: 0.4rem;
    }
    
    .game-area {
        grid-area: game;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        margin-bottom: 0;
        min-height: 0;
        overflow: hidden;
    }
    
    .game-header-unified {
        grid-area: header;
        flex-shrink: 0;
    }
    
    .top-section {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .game-header {
        display: flex;
        gap: 0.3rem;
        margin-bottom: 0.3rem;
        flex-shrink: 0;
    }
    
    .category-card,
    .progress-card,
    .streak-card {
        flex: 1;
        min-width: 0;
        padding: var(--spacing-sm);
        border-radius: 6px;
    }
    
    .category-card h3,
    .progress-card h3,
    .streak-card h3 {
        font-size: 0.7rem;
        margin-bottom: 0.2rem;
    }
    
    .category-card p,
    .progress-card p,
    .streak-card p {
        font-size: 0.8rem;
    }
    
    .game-stats {
        gap: var(--spacing-sm);
        margin-bottom: 0.3rem;
        flex-shrink: 0;
    }
    
    .stat-item {
        padding: 0.4rem;
        border-radius: 4px;
    }
    
    .stat-item .stat-label {
        font-size: 0.65rem;
        margin-bottom: 0.1rem;
    }
    
    .stat-item .stat-value {
        font-size: 0.8rem;
    }
    
    .hangman-container {
        padding: 0.3rem;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-top: 0;
        min-height: 0;
    }
    
    #hangman {
        width: 100%;
        height: 100%;
        max-width: 200px;
        object-fit: contain;
    }
    
    .game-info {
        order: 3;
        flex-shrink: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: var(--spacing-sm) 0; /* Ajout de marge verticale */
        min-height: 80px; /* Hauteur fixe pour éviter les sauts du clavier */
    }
    
    .word-display {
        font-size: 1.2rem;
        letter-spacing: 0;
        margin: 0 auto 0.4rem auto;
        padding: 0 var(--spacing-sm);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        line-height: 1.8;
        text-align: center;
        min-height: 2.2rem; /* Hauteur stable pour une ligne minimum */
    }
    
    .word-display .word-group {
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        margin: 0;
    }
    
    .word-display span {
        margin: 0 0.15rem;
        padding: 0 0.15rem;
        min-width: 1.1rem;
        min-height: 1.2em;
        line-height: 1.2;
        border-bottom-width: 2px;
        font-size: inherit;
        text-align: center;
    }
    
    /* Indicateur d'espace plus petit sur mobile */
    .space-indicator {
        width: 1rem;
    }
    
    .space-indicator::after {
        font-size: 1rem;
    }
    
    .keyboard {
        grid-area: keyboard;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 0.3rem;
        margin: 0 var(--spacing-sm);
        padding: 0;
        flex-shrink: 0;
    }
    
    /* Décalage d'une demi-touche pour imiter un vrai clavier AZERTY */
    .keyboard button:nth-child(n+11):nth-child(-n+20) {
        transform: translateX(calc(50% + 0.15rem));
    }
    
    .keyboard button:nth-child(n+21) {
        transform: translateX(calc(100% + 0.3rem));
    }
    
    /* Animation active avec préservation du décalage AZERTY */
    .keyboard button:nth-child(n+11):nth-child(-n+20):active:not(:disabled) {
        transform: translateX(calc(50% + 0.15rem)) scale(0.95);
    }
    
    .keyboard button:nth-child(n+21):active:not(:disabled) {
        transform: translateX(calc(100% + 0.3rem)) scale(0.95);
    }
    
    .keyboard button {
        padding: 0.7rem 0.2rem;
        font-size: 1rem;
        border-radius: var(--radius-sm);
        min-height: 42px;
    }
    
    .game-controls {
        grid-area: controls;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0.6rem var(--spacing-sm);
        margin-bottom: env(safe-area-inset-bottom, 0);
        flex-shrink: 0;
        flex-wrap: wrap;
    }
    
    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        flex: 1;
        min-width: 80px;
    }
    
    /* Statistiques mobile */
    .stats-overview {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .big-stat-card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    
    .big-stat-number {
        font-size: 3rem;
    }
    
    .achievements-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-actions .btn {
        margin: var(--spacing-sm);
        width: 100%;
        max-width: 300px;
    }
    
    /* Toasts mobile */
    .toast {
        min-width: 280px;
        max-width: 90vw;
        padding: 1.2rem var(--spacing-lg);
    }
    
    .toast-content {
        gap: 0.8rem;
    }
    
    .toast-icon {
        font-size: 1.5rem;
    }
    
    .toast-message {
        font-size: 1rem;
    }
}

/* ===== DESKTOP (min-width: 769px) ===== */

@media (min-width: 769px) {
    /* Masquer le clavier mobile */
    .keyboard {
        display: none !important;
    }
    
    /* Container mieux adapté */
    .container {
        max-width: 1200px;
        width: 95%;
        padding: var(--spacing-xl);
        height: auto;
    }
    
    /* Layout principal en grille 3 colonnes pour le jeu */
    .top-section {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
        grid-template-areas: 
            "category progression streak"
            "tries letters hangman"
            "tries letters hangman";
    }
    
    /* Header sur toute la largeur avec grille */
    .game-header {
        display: contents;
        margin-bottom: 0;
    }
    
    .category-card {
        grid-area: category;
    }
    
    .progress-card {
        grid-area: progression;
    }
    
    .streak-card {
        grid-area: streak;
    }
    
    .game-stats {
        display: contents;
        margin-bottom: 0;
    }
    
    .stat-item:first-child {
        grid-area: tries;
    }
    
    .stat-item:last-child {
        grid-area: letters;
    }
    
    /* Pendu occupe 2 lignes */
    .hangman-container {
        grid-area: hangman;
        padding: var(--spacing-lg);
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.3);
        border-radius: var(--radius-lg);
    }
    
    #hangman {
        width: 100%;
        height: auto;
        max-width: 200px;
        max-height: 250px;
    }
    
    /* Styles communs pour toutes les cartes */
    .category-card, 
    .progress-card, 
    .streak-card,
    .stat-item {
        padding: var(--spacing-lg);
        border-radius: var(--radius-md);
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-light);
    }
    
    .category-card h3, 
    .progress-card h3, 
    .streak-card h3,
    .stat-item .stat-label {
        font-size: 0.95rem;
        margin-bottom: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .category-card p, 
    .progress-card p, 
    .streak-card p,
    .stat-item .stat-value {
        font-size: 1.25rem;
        font-weight: bold;
        color: var(--text-primary);
    }
    
    .streak-card p {
        color: var(--warning-color);
    }
    
    /* Zone du mot plus grande */
    .word-display {
        font-size: 2.8rem;
        gap: 1.2rem;
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-lg);
        background: rgba(0, 0, 0, 0.15);
        border-radius: var(--radius-md);
    }
    
    .word-display span {
        min-width: 2.2rem;
        min-height: 1.2em;
        line-height: 1.2;
        padding: 0 0.6rem;
        border-bottom-width: 3px;
        margin: 0 0.25rem;
    }
    
    /* Contrôles visibles et centrés */
    .game-controls {
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
        justify-content: center;
        gap: var(--spacing-xl);
    }
    
    .btn {
        padding: 0.9rem var(--spacing-xl);
        font-size: 1.1rem;
        border-radius: var(--radius-round);
    }
    
    /* Menu actions desktop */
    .menu-actions {
        flex-direction: row;
        justify-content: center;
    }
    
    /* Les cartes du header sont gérées par la grille principale */
}

/* ===== TRÈS LARGE ÉCRAN (min-width: 1200px) ===== */

@media (min-width: 1200px) {
    .welcome-section h2 {
        font-size: 3rem;
    }
    
    .stats-content h2 {
        font-size: 3rem;
    }
    
    .word-display {
        font-size: 3.2rem;
    }
    
    .big-stat-number {
        font-size: 5rem;
    }
}