@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

#gameCanvas {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    padding: 15px;
    width: 100%;
    min-height: 550px;
}

#gameCanvas * { box-sizing: border-box; touch-action: manipulation; }

/* PARTICULES */
#gameCanvas .mm-background-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#gameCanvas .mm-particle { position: absolute; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: mm-float 10s ease-in-out infinite; }
@keyframes mm-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-30px); } }

/* CONTENEUR */
#gameCanvas #mm-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 30px;
    width: 100%; max-width: 480px; height: 100%; min-height: 500px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    position: relative; overflow: hidden; z-index: 1;
    display: flex; flex-direction: column;
}

/* ECRANS */
#gameCanvas .mm-screen { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    transition: opacity 0.4s ease; 
    background: rgba(22, 43, 68, 0.95); padding: 20px; z-index: 50;
}
#gameCanvas .mm-screen.mm-hidden { opacity: 0; pointer-events: none; z-index: -1; }

/* UI */
#gameCanvas .mm-title { 
    font-size: clamp(1.8em, 6vw, 2.5em); font-weight: 700; 
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24); 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    margin-bottom: 30px; text-shadow: 0 0 20px rgba(255,255,255,0.1);
}

#gameCanvas #mm-ui {
    width: 100%; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;
}
#gameCanvas #mm-score-display { color: white; font-size: 1.5em; font-weight: 600; }
#gameCanvas #mm-message-display { color: white; font-size: 1.2em; min-height: 1.5em; margin-bottom: 10px; }
#gameCanvas .mm-hidden { display: none !important; }

/* BOUTONS */
#gameCanvas .mm-button { 
    background: linear-gradient(135deg, #5263af, #764ba2); color: white; border: none; 
    padding: 15px 35px; font-size: 1.1em; font-weight: 600; border-radius: 50px; 
    cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: transform 0.2s;
}
#gameCanvas .mm-button:hover { transform: translateY(-3px); }
#gameCanvas .mm-button-icon {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); 
    color: white; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 1.2em;
}

/* PASTILLES */
#gameCanvas #mm-pads-container { flex-grow: 1; display: flex; justify-content: center; align-items: center; }
#gameCanvas .mm-pads-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; max-width: 320px; }
#gameCanvas .mm-pad { 
    aspect-ratio: 1; border-radius: 20px; cursor: pointer; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: transform 0.1s, filter 0.1s;
    opacity: 0.7; /* Légèrement éteint par défaut */
}
#gameCanvas .mm-pad[data-pad="0"] { background: #2ecc71; } /* Vert */
#gameCanvas .mm-pad[data-pad="1"] { background: #e74c3c; } /* Rouge */
#gameCanvas .mm-pad[data-pad="2"] { background: #f1c40f; } /* Jaune */
#gameCanvas .mm-pad[data-pad="3"] { background: #3498db; } /* Bleu */

#gameCanvas .mm-pad:hover { opacity: 0.9; transform: scale(1.02); }
#gameCanvas .mm-pad:active, #gameCanvas .mm-pad.mm-active { 
    opacity: 1; transform: scale(0.95); 
    box-shadow: 0 0 30px currentColor; 
    filter: brightness(1.3);
}
#gameCanvas .mm-pad.mm-disabled { cursor: default; pointer-events: none; }

/* GAME OVER */
#gameCanvas .mm-game-over-title { color: #e74c3c; font-size: 2.5em; margin-bottom: 20px; }
#gameCanvas .mm-final-score-text { color: white; font-size: 1.2em; margin-bottom: 30px; }
#gameCanvas #mm-final-score { color: #f1c40f; font-weight: bold; }