*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


body{

    font-family:"Poppins",sans-serif;

    background:
    linear-gradient(
        135deg,
        #020617,
        #0f172a,
        #1e293b
    );

    color:white;

    display:flex;

    justify-content:center;

    padding:40px;

    min-height:100vh;

}


/* ===========================
   CONTENEDOR
=========================== */


.container{

    width:min(1200px,95vw);

}



/* ===========================
   HEADER
=========================== */


header{

    text-align:center;

    margin-bottom:35px;

}


header h1{

    font-size:2.5rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:10px;

    text-shadow:

    0 5px 20px rgba(0,0,0,.5);

}


header p{

    color:#cbd5e1;

    font-size:1rem;

}



/* ===========================
   PANEL DE AUDIO
=========================== */


#panel{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:flex-end;

    gap:20px;

    margin-bottom:35px;

    padding:30px;


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.05)
    );


    backdrop-filter:blur(20px);


    border-radius:24px;


    border:

    1px solid rgba(255,255,255,.15);


    box-shadow:

    0 25px 60px rgba(0,0,0,.45);

}



/* ===========================
   CONTROLES DE ARCHIVOS
=========================== */


.control{

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

    width:200px;

}



.control label{

    text-align:center;

    min-height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.85rem;

    color:#e2e8f0;

    font-weight:500;

}



/* ===========================
   INPUT ARCHIVOS
=========================== */


input[type=file]{


    width:200px;


    height:42px;


    padding:8px;


    border:none;


    border-radius:12px;


    background:#f8fafc;


    color:#334155;


    cursor:pointer;


    font-family:"Poppins",sans-serif;


    font-size:12px;


    transition:.25s;


}



input[type=file]:hover{


    transform:

    translateY(-3px);


    box-shadow:

    0 8px 20px rgba(0,0,0,.25);


}



/* ===========================
   BOTONES
=========================== */


.buttons{


    width:100%;


    display:flex;


    justify-content:center;


    gap:18px;


    margin-top:10px;


}



button{


    height:45px;


    padding:0 28px;


    border:none;


    border-radius:12px;


    cursor:pointer;


    font-size:15px;


    font-weight:600;


    color:white;


    transition:.25s;


}



button:hover{


    transform:

    translateY(-3px);


}



/* ===========================
   BOTÓN PLAY
=========================== */


#startMusic{


    background:#22c55e;


    box-shadow:

    0 0 20px rgba(34,197,94,.35);


}



#startMusic:hover{


    background:#16a34a;


}



/* ===========================
   BOTÓN STOP
=========================== */


#stopMusic{


    background:#ef4444;


    box-shadow:

    0 0 20px rgba(239,68,68,.35);


}



#stopMusic:hover{


    background:#dc2626;


}



/* ===========================
   BOTÓN REINICIAR
=========================== */


#restartGame{


    background:#3b82f6;


    box-shadow:

    0 0 20px rgba(59,130,246,.35);


}



#restartGame:hover{


    background:#2563eb;


}



/* ===========================
   CANVAS
=========================== */


canvas{


    display:block;


    margin:auto;


    width:100%;


    max-width:900px;


    border-radius:20px;


    border:

    4px solid rgba(255,255,255,.18);


    background:#87ceeb;


    image-rendering:pixelated;


    box-shadow:


    0 30px 70px rgba(0,0,0,.55);


}



/* ===========================
   AVISO
=========================== */


.notice{


    margin-top:20px;


    text-align:center;


    color:#cbd5e1;


    font-size:.9rem;


    line-height:1.7;


}



.notice strong{


    color:white;


}



/* ===========================
   RESPONSIVE
=========================== */


@media(max-width:1100px){


    .control{

        width:180px;

    }


    input[type=file]{

        width:180px;

    }


}



@media(max-width:700px){


    #panel{

        flex-direction:column;

        align-items:center;

    }


    .buttons{

        flex-direction:column;

        align-items:center;

    }


}

/* ===========================
   CONTROLES TÁCTILES
=========================== */

#touchControls{

    display:none;

    margin:25px auto;

    width:220px;

    user-select:none;

}

.touchRow{

    display:flex;

    justify-content:space-between;

    margin-top:12px;

}

.touchBtn{

    width:90px;

    height:90px;

    border:none;

    border-radius:18px;

    font-size:34px;

    background:#334155;

    color:white;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

}

.touchBtn:active{

    transform:scale(.95);

    background:#2563eb;

}

/* Mostrar sólo en celulares */

@media (max-width:900px){

    #touchControls{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

}