/* GARDE TOUT TON DÉBUT IDENTIQUE */
    #gameCanvas {
        display: block;
        margin: 0 auto;
        width: 98vw; 
        height: auto;
        max-height: 85vh; 
        border: 4px solid #5d3a1a;
        background: #000;
    }

    * { 
        touch-action: none; 
        -webkit-tap-highlight-color: transparent; 
        user-select: none; 
        -webkit-user-select: none; 
        box-sizing: border-box;
    }
    
    body { 
        margin: 0; 
        padding: 0; 
        background: #000; 
        color: #ffcc00; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        font-family: 'Arial Black', sans-serif; 
        overflow: hidden; 
        height: 100vh; 
    }

    body {
        background-image: url('img/gag.png'); 
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        backdrop-filter: blur(5px); 
    }

    #ui { 
        display: flex; 
        gap: 10px; 
        padding: 10px; 
        background: linear-gradient(to bottom, #1a1005, #000); 
        width: 100%; 
        justify-content: center; 
        border-bottom: 3px solid #5d3a1a; 
        box-shadow: 0 5px 15px rgba(255, 234, 0, 0.2); 
        z-index: 100; 
        align-items: center; 
        flex-wrap: wrap; 
    }

    .stat { 
        background: #000; 
        padding: 5px 10px; 
        border: 2px solid #5d3a1a; 
        border-radius: 10px; 
        font-size: 14px; 
        white-space: nowrap; 
    }

    .bar { width: 70px; height: 12px; background: #333; border: 1px solid #555; display: inline-block; vertical-align: middle; border-radius: 4px; overflow: hidden; }
    #ammo-fill { height: 100%; background: #ffff00; width: 100%; }
    #trap-fill { height: 100%; background: #8b4513; width: 0%; }
    #rage-fill { height: 100%; background: #a020f0; width: 0%; box-shadow: 0 0 15px #a020f0; }

    canvas {
        display: block;
        margin: 5px auto; 
        border: 4px solid #5d3a1a;
        background: #000;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
    }

    #comments {
        display: none;
        width: 95%;
        max-width: 800px;
        background: #1a1005;
        border: 3px solid #5d3a1a;
        padding: 20px;
        border-radius: 10px;
        color: #ffcc00;
        margin: 20px auto;
        text-align: center;
    }

    @media (max-width: 768px) {
        #comments {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 95% !important;
            height: 85vh !important;
            z-index: 9999999 !important;
            display: none; 
            flex-direction: column;
            padding: 0 !important;
            overflow: hidden !important;
        }
        #comments .scroll-area {
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            flex: 1;
            padding: 20px;
            touch-action: pan-y !important;
        }
        #comments .mobile-header { display: flex !important; }
    }

    .mobile-header { display: none; }

    #reset-btn { background: #ff3333; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; }
    #home-btn { background: #ffcc00; color: #000; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; margin-left: 10px; }
    
    /* --- C'EST ICI QUE CA SE PASSE --- */
    #mobile-controls { 
        position: fixed; 
        inset: 0; 
        pointer-events: none; 
        z-index: 1000; 
        display: flex; 
        justify-content: space-between; 
        /* REMPLACÉ flex-end par 80% pour forcer la remontée */
        align-items: center; 
        padding: 30px;
        padding-top: 50vh; 
    }

    .joy-base { 
        width: 130px; 
        height: 130px; 
        background: rgba(255,255,255,0.1); 
        border: 3px solid rgba(255,255,255,0.2); 
        border-radius: 50%; 
        pointer-events: auto; 
        position: relative; 
        /* On remonte spécifiquement la base */
        bottom: 0px; 
    }

    #knob { width: 50px; height: 50px; background: #ffcc00; border-radius: 50%; position: absolute; left: 40px; top: 40px; }
    
    .btn-group { 
        display: flex; 
        gap: 15px; 
        pointer-events: auto; /* Changé none en auto pour pouvoir cliquer */
        position: relative;
        bottom: 0px; /* On remonte aussi les boutons */
    }

    .m-btn { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: auto; font-weight: bold; font-size: 12px; color: white; border: 4px solid rgba(255,255,255,0.4); }
    #m-fire { background: rgba(255,0,0,0.5); }
    #m-rage { background: rgba(160,32,240,0.5); border-color: #a020f0; animation: pulse 1.5s infinite; }
    
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(160,32,240, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(160,32,240, 0); } 100% { box-shadow: 0 0 0 0 rgba(160,32,240, 0); } }